색상 음영 생성기: 일관된 UI 팔레트 빠르게 구축하기

단일 브랜드 색상을 선택하는 것은 쉽습니다. 배경에 충분히 밝고, 텍스트에 충분히 어둡고, 호버 상태를 위한 중간 단계가 있는 완전한 팔레트를 구축하는 것이 대부분의 개발자가 어려워하는 부분입니다. 색상 음영 생성기는 이 작업을 자동화하여 처음부터 일관된 팔레트를 유지할 수 있게 합니다.

색상 음영 생성기 사용해보기 →

색상 음영이란 무엇인가

색상 음영 스케일은 단일 기본 색조에서 파생된 관련 색상의 집합입니다. Tailwind CSS, Material Design, Radix Colors 같은 디자인 시스템은 모두 거의 흰색에서 거의 검정까지 색조 정체성을 유지하면서 변화하는 번호가 매겨진 스케일(보통 50~~950 또는 100~~900)을 사용합니다.

예시 — 파란색 스케일:

단계	Hex	용도
50	`#eff6ff`	페이지 배경
100	`#dbeafe`	카드 배경
200	`#bfdbfe`	테두리
400	`#60a5fa`	호버 상태
600	`#2563eb`	기본 버튼
800	`#1e40af`	활성 상태
950	`#172554`	어두운 텍스트

음영 생성의 수학적 원리

대부분의 생성기는 HSL(색조, 채도, 명도)로 작동합니다. 명도가 조작해야 할 단일 축이기 때문입니다:

기본 색상: hsl(217, 91%, 60%)   → blue-500

밝은 음영: L 증가
어두운 음영: L 감소

색조는 일정하게 유지됩니다. 양 끝에서 채도가 약간 조정될 수 있습니다 — 이것이 수동으로 조정된 팔레트가 단순한 선형 보간보다 더 좋게 보이는 이유입니다.

왜 RGB를 사용하지 않는가

RGB에는 단일 “명도” 차원이 없습니다. #ffffff와 #0000ff는 둘 다 채널이 최대값이지만, 하나는 시각적으로 밝고 다른 하나는 어둡습니다. RGB 값을 조작하여 음영 스케일을 생성하면 예측 불가능한 결과가 나옵니다.

왜 HSB/HSV를 사용하지 않는가

HSB의 “밝기” 채널은 지각적 명도와 다르게 동작합니다. 더 지각적으로 균일한 스케일을 위해 일부 도구는 HSL 대신 OKLCH를 사용합니다 — 더 정확하지만 덜 직관적입니다.

Tailwind 스타일 팔레트 생성하기

Tailwind의 색상 시스템은 11단계를 사용합니다: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. 500단계는 보통 기본 색상에 가깝습니다.

생성기에 임의의 hex 색상을 입력하면 CSS 커스텀 속성으로 완전한 11단계 스케일을 얻을 수 있습니다:

:root {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

스타일시트 전체에서 var(--color-brand-500)을 사용할 수 있습니다. 이것은 Tailwind가 내장 팔레트를 제공하는 방법과 구조적으로 동일합니다.

접근성: 명도 대비가 중요합니다

음영 스케일은 단계들이 접근 가능할 때만 유용합니다. WCAG 2.1 요구사항:

AA 일반 텍스트: 배경 대비 명도 대비 ≥ 4.5:1
AA 큰 텍스트 / UI 컴포넌트: 명도 대비 ≥ 3:1
AAA: 명도 대비 ≥ 7:1

실용적인 규칙: 흰색 배경 위에서는 본문 텍스트에 음영 600 이상을 사용하세요. 검정 배경 위에서는 음영 300 이하를 사용하세요. 스케일의 지각적 균일성이 WCAG 준수를 보장하지 않으므로 항상 명도 대비 검사기로 확인하세요.

음영·틴트·톤 구분하기

용어	정의	예시
음영 (Shade)	기본 색상 + 검정 추가	어두운 파란색
틴트 (Tint)	기본 색상 + 흰색 추가	밝은 파란색
톤 (Tone)	기본 색상 + 회색 추가	탁한 파란색

대부분의 UI 팔레트는 세 가지를 혼합합니다. 가장 밝은 단계는 틴트, 가장 어두운 단계는 음영, 중간 단계는 과도한 채도를 피하기 위해 종종 톤이 포함됩니다.

실용적인 워크플로

브랜드 색상 선택 (보통 중간 무게의 단계 — 500~600 근처).
생성기로 전체 스케일 생성.
의미론적 이름 할당: --color-surface, --color-primary, --color-text.
주요 텍스트/배경 쌍의 명도 대비 확인.
CSS 커스텀 속성 또는 Tailwind 설정 객체로 내보내기.

색상 팔레트 생성하기 →

TailwindCSS에서 출력 사용하기

Tailwind를 사용한다면 생성된 값을 tailwind.config.js에 직접 붙여넣으세요:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ...
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

프로젝트 전체에서 bg-brand-500, text-brand-700 등을 사용할 수 있게 됩니다.