색상 음영 생성기 - 하나의 색상으로 틴트, 셰이드, 톤 생성 온라인
단일 기본 색상에서 틴트, 셰이드, 톤을 생성합니다. CSS 변수, Tailwind 설정, JSON, SCSS로 내보내기 — 100% 클라이언트 사이드.
자주 묻는 질문
색상 음영 생성기란 무엇인가요?
색상 음영 생성기는 하나의 기본 색상에서 체계적인 색상 변형을 만드는 온라인 도구입니다. 틴트(흰색과 혼합하여 밝게), 셰이드(검정과 혼합하여 어둡게), 톤(채도를 낮춰 부드럽게)을 생성합니다. 웹 디자인과 개발에서 일관된 색상 시스템을 구축하는 데 필수적입니다.
이 도구는 어떻게 사용하나요?
1. HEX 입력 필드나 색상 선택기로 기본 색상을 입력합니다. 2. 보기 모드를 선택합니다: 전체(틴트+셰이드+톤), 틴트만, 셰이드만, 톤만, 또는 Tailwind 스케일. 3. 단계 수(5-25)를 조절하여 변형 개수를 제어합니다. 4. 원하는 출력 형식(HEX, RGB, HSL)을 선택합니다. 5. 스와치를 클릭하여 색상값을 복사하거나, 내보내기 옵션으로 전체 팔레트를 CSS 변수, Tailwind 설정, JSON, SCSS로 복사합니다.
색상 데이터는 안전한가요? 서버로 전송되나요?
색상 데이터는 100% 안전하며 브라우저를 벗어나지 않습니다. 모든 색상 계산 — 틴트, 셰이드, 톤, 형식 변환 — 은 JavaScript 수학 연산을 사용하여 완전히 클라이언트 측에서 수행됩니다. 서버로 데이터가 전송되지 않으므로 독점 브랜드 색상과 기밀 디자인 자산 작업에 안전합니다.
틴트, 셰이드, 톤의 차이는 무엇인가요?
틴트는 흰색과 혼합하여 밝게 만든 색상입니다(예: 분홍색은 빨간색의 틴트). 셰이드는 검정과 혼합하여 어둡게 만든 색상입니다(예: 네이비는 파란색의 셰이드). 톤은 채도를 줄여 부드럽게 만든 색상입니다(예: 더스티 로즈는 빨간색의 톤). 이 세 가지 작업은 핵심 색조 정체성을 유지하면서 변형을 만드는 기본적인 방법입니다.
이 도구와 색상 팔레트 생성기의 차이는?
색상 팔레트 생성기는 색상 이론 관계(보색, 유사색, 삼색 등)를 사용하여 다중 색상 조화 팔레트를 만듭니다. 색상 음영 생성기는 단일 색상의 변형에 집중합니다 — 모두 같은 기본 색조를 공유하는 틴트, 셰이드, 톤을 생성합니다. 여러 관련 색상이 필요할 때는 색상 팔레트 생성기를, 하나의 색상에서 밝기/채도 변형 범위가 필요할 때는 색상 음영 생성기를 사용하세요.
생성된 팔레트를 Tailwind CSS 프로젝트에서 사용할 수 있나요?
네. 이 도구는 표준 50-950 명명 규칙을 사용하는 전용 Tailwind 보기를 제공합니다. 스케일을 Tailwind CSS 설정 객체로 내보내고 tailwind.config.js 파일의 colors 키에 직접 붙여넣을 수 있습니다. 기본 색상은 500 단계에 매핑되며, 밝은 값(50-400)은 틴트, 어두운 값(600-950)은 셰이드입니다.
틴트와 셰이드 비율은 어떻게 계산되나요?
틴트는 각 RGB 채널을 255(흰색)를 향해 선형 보간하여 계산합니다. 공식: newValue = currentValue + ((255 - currentValue) × factor), 여기서 factor는 0(원본)에서 1(순백)까지입니다. 셰이드는: newValue = currentValue × (1 - factor)로 0(검정)을 향해 보간합니다. 톤은 색조와 밝기를 일정하게 유지하면서 HSL 채도 값을 줄입니다.
코드 예제
// Color Shades Generator
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function generateTints(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const tints = [];
for (let i = 1; i <= steps; i++) {
const factor = i / (steps + 1);
tints.push(rgbToHex(
rgb.r + (255 - rgb.r) * factor,
rgb.g + (255 - rgb.g) * factor,
rgb.b + (255 - rgb.b) * factor,
));
}
return tints;
}
function generateShades(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const shades = [];
for (let i = 1; i <= steps; i++) {
const factor = 1 - i / (steps + 1);
shades.push(rgbToHex(
rgb.r * factor,
rgb.g * factor,
rgb.b * factor,
));
}
return shades;
}
// Usage
const base = '#3b82f6';
console.log('Tints:', generateTints(base, 5));
console.log('Shades:', generateShades(base, 5));