Color Shades Generator: 색상 하나로 완전한 팔레트 만들기

모든 디자인 시스템은 결국 각 브랜드 색상에 대한 색상 스케일이 필요합니다. 배경색, 테두리, 텍스트, 호버 상태, 포커스 링, 비활성 상태 — 이 모든 것에 다양한 밝기의 색상이 필요합니다. 이걸 하나하나 손으로 만드는 것은 정말 지루한 작업입니다. 눈으로 맞추면 결과가 대개 불균일합니다 — 어떤 단계는 너무 크게 뛰고, 어떤 단계는 차이가 너무 미미합니다.

Color Shades Generator는 기본 색상 하나를 입력하면 약 1초 만에 균등하게 배분된 완전한 팔레트를 생성합니다. 이 글에서는 어떻게 작동하는지, 프로젝트에서 출력물을 어떻게 사용하는지, 그리고 어디에서 한계가 있는지 설명합니다.

Shade와 Tint가 실제로 무엇인가

도구를 설명하기 전에, 용어를 명확히 하는 것이 좋습니다. "shade"라는 말이 느슨하게 사용되는 경우가 많기 때문입니다.

Shade는 색상에 검정을 혼합해서 어둡게 만든 것이고, Tint는 색상에 흰색을 혼합해서 밝게 만든 것입니다. 함께 사용하면 거의 검정에 가까운 어두운 색부터 거의 흰색에 가까운 밝은 색까지 전체 범위를 만들 수 있습니다.

실제로 대부분의 디자인 시스템은 이 전체 범위를 사용하면서 단순히 "색상 스케일" 또는 "색상 팔레트"라고 부릅니다. 중요한 것은 용어가 아니라 결과물, 즉 UI 전체에서 일관되게 사용할 수 있는 밝은 색부터 어두운 색까지의 조화로운 색상 세트입니다.

전형적인 구조는 다음과 같습니다:

단계	사용 용도
50	매우 밝은 배경, 흰색 위의 호버 상태
100	밝은 배경, 선택 상태 배경
200	밝은 배경의 테두리, 미묘한 채우기
300	비활성 텍스트, 플레이스홀더 텍스트
400	보조 텍스트, 흐린 레이블
500	기본 — 보통 기본 색상 자체
600	버튼 호버 상태, 약간 더 어두운 기본색
700	누름 상태, 더 어두운 인터랙티브 요소
800	밝은 배경의 어두운 텍스트
900	매우 어두운 색, 제목 텍스트 대안
950	거의 검정, 다크 모드 기본

Tailwind가 이 11단계 시스템(50~950)을 대중화시켰고, 이제 Tailwind를 사용하지 않더라도 따를 가치가 있는 표준이 되었습니다.

생성 원리: HSL 조정

생성기는 HSL 색 공간 — 색조(Hue), 채도(Saturation), 명도(Lightness) — 에서 작동합니다. HSL이 익숙하지 않다면 간단히 설명하면: 색조는 색의 각도(0~360, 0은 빨강, 120은 초록, 240은 파랑), 채도는 강도(0%는 회색, 100%는 완전히 선명한 색), 명도는 0%(검정)에서 100%(흰색)까지입니다.

기본 색상이 주어지면 도구는:

기본 색상을 HSL로 변환합니다
색조를 고정합니다 (전체 스케일에서 같은 색 계열)
가장 밝은 단계에서 약 95%에서 가장 어두운 단계의 약 10%까지 펼쳐진 명도 값을 생성합니다
선택적으로 극단적인 값에서 미묘한 채도 조정을 합니다

마지막 포인트는 설명이 필요합니다. 인간의 색 인식은 비선형적입니다. 순수 HSL에서 명도 90%의 밝은 파랑은 거의 흰색처럼 보이고 완전히 바래 보입니다. 높은 명도 값에서 채도가 시각적으로 "사라지는" 것입니다. 많은 전문 팔레트 생성기는 밝은 쪽에서 채도를 약간 높여 색조가 보이게 하고, 어두운 쪽에서는 탁해 보이는 것을 방지하기 위해 채도를 줄이는 방식으로 보상합니다.

결과는 수학적으로 균등한 것이 아니라 인간의 눈에 균등하게 보이는 팔레트입니다.

50~950 명명 규칙이 생긴 이유

Tailwind CSS가 이를 표준화한 공로가 있습니다. Tailwind 이전에는 모든 사람이 서로 다른 명명 규칙을 사용했습니다: "밝은 파랑", "파랑-더-밝게", "파랑-어두움", "파랑-가장-어두움" — 각 프로젝트마다 독자적인 시스템이 있어서 어디에도 적용하기 어려웠습니다.

번호 시스템(50, 100, 200 ... 900, 950)에는 몇 가지 실질적인 장점이 있습니다:

단계를 추가하기 쉽습니다. 200과 300 사이에 무언가가 필요하면 250을 추가합니다. 자연스러운 자리가 있습니다.

한눈에 의도를 전달합니다. color-100을 보는 개발자는 즉시 밝은 배경 색조라는 것을 압니다. color-900은 분명히 어두운 텍스트 영역입니다. 설명적인 이름 없이도 번호가 의미를 전달합니다.

도구 호환이 됩니다. Figma 변수, CSS 커스텀 속성, JavaScript 테마 객체 — 모두 숫자 스케일과 잘 맞습니다. Tailwind도 같은 번호를 사용하기 때문에 디자이너와 개발자가 같은 언어를 사용하게 됩니다.

과도한 세분화를 억제합니다. "primary-blue", "primary-blue-hover용-약간-더-밝게" 같은 이름이 있으면 팀이 점점 더 많은 명명된 변형을 추가하는 경향이 있습니다. 번호 시스템은 정의된 스케일을 일관되게 사용하도록 유도합니다.

프로젝트에서 출력물 활용하기

생성기는 여러 출력 형식을 제공합니다. 각각 어떻게 사용하는지 알아보겠습니다.

CSS 커스텀 속성

CSS 변수 출력물은 다음과 같습니다:

:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-200: #bfdbfe;
  --color-300: #93c5fd;
  --color-400: #60a5fa;
  --color-500: #3b82f6;
  --color-600: #2563eb;
  --color-700: #1d4ed8;
  --color-800: #1e40af;
  --color-900: #1e3a8a;
  --color-950: #172554;
}

이것을 메인 CSS 파일의 :root 블록에 붙여넣으면 스타일시트 어디서나 변수를 사용할 수 있습니다:

.button-primary {
  background-color: var(--color-500);
  border-color: var(--color-600);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-600);
  border-color: var(--color-700);
}

.button-primary:focus {
  outline-color: var(--color-300);
}

이 접근 방식은 특히 테마 적용에 강력합니다. 브랜드 색상을 CSS 커스텀 속성으로 정의하면 테마 전환이 [data-theme="dark"] 또는 .dark-mode 선택자에서 값을 재정의하는 것만으로 가능해집니다.

Tailwind CSS 설정

Tailwind를 사용하고 있다면 팔레트를 tailwind.config.js 또는 tailwind.config.ts에 바로 추가할 수 있습니다:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ... 나머지도 동일하게
          950: '#172554',
        },
      },
    },
  },
}

그러면 브랜드 색상에 대한 전체 Tailwind 유틸리티 클래스 시스템을 사용할 수 있습니다: bg-brand-100, text-brand-700, border-brand-300, hover:bg-brand-600 등. 커스텀 색상이 Tailwind의 내장 팔레트 색상과 똑같이 동작합니다.

JavaScript/TypeScript 객체

컴포넌트 라이브러리나 디자인 토큰의 경우, JavaScript 객체가 원시 CSS보다 더 유용한 경우가 많습니다. 색상 값을 컴포넌트 코드에 직접 임포트하거나, styled-components에 전달하거나, CSS-in-JS 라이브러리와 함께 사용할 수 있습니다.

색상 스케일로 디자인 시스템 구축하기

디자인 시스템에는 보통 최소 3~4개의 색상 스케일이 필요합니다:

Primary: 주요 브랜드 색상
Neutral/Gray: 텍스트, 배경, 테두리용 — 보통 순수 중립보다 약간 따뜻하거나 차가운 회색
시맨틱 색상: 성공(초록), 경고(앰버/노랑), 오류(빨강), 정보(파랑)

각각을 셰이드 생성기에 통과시키고 일관되게 이름을 붙이면 디자인 시스템의 색상 기반이 완성됩니다.

전형적인 사용 패턴:

primary-50, primary-100 → 배경, 선택 상태 채우기
primary-200, primary-300 → 미묘한 테두리, 태그, 배지
primary-500, primary-600 → 인터랙티브 요소, 버튼, 링크
primary-700, primary-800 → 누름 상태, 어두운 인터랙티브 요소
neutral-100~neutral-900 → 페이지 배경에서 본문 텍스트까지

이것이 갖춰지면 모든 컴포넌트가 임의적인 색상을 선택하지 않고 팔레트에서 색상을 가져올 수 있습니다. 대규모 코드베이스에서 일관성을 유지하는 것이 훨씬 쉬워집니다.

Color Palette Generator와의 비교

사이트에는 Color Palette Generator도 있는데, 비슷해 보여서 차이를 명확히 하는 것이 좋겠습니다.

Color Palette Generator는 보통 보완적이거나 조화로운 색상 세트를 생성합니다 — 유사색, 삼원색, 분리 보색 배합 등. 하나의 색상을 주면 그와 잘 어울리는 다른 색상들을 제안합니다. 색채 이론과 좋은 색상 조합을 찾는 것에 관한 도구입니다.

Color Shades Generator는 하나의 색상을 받아서 그 색상의 밝은 것부터 어두운 것까지 전체 범위를 제공합니다. 다른 색상을 찾는 것이 아니라, 이미 선택한 색상의 모든 셰이드를 얻는 것입니다.

실제로 둘 다 사용할 수 있습니다: 팔레트 생성기로 브랜드 색상 조합을 찾고, 셰이드 생성기로 각 색상의 전체 스케일을 만드는 방식입니다.

알아야 할 한계점

이런 도구들을 충분히 써본 사람으로서 어디서 문제가 생기는지 알고 있습니다. 주의해야 할 사항들입니다.

순수한 검정과 흰색은 쓸모없는 팔레트를 만듭니다. #000000(순수 검정)이나 #FFFFFF(순수 흰색)를 입력하면 생성기에 사용할 색조가 없습니다. 전체 팔레트가 단순히 회색조가 됩니다. 중립 색상에는 적어도 약간의 색조와 채도가 있는 색상을 사용하세요. 약간 따뜻한 회색(#f5f0eb)은 순수 흰색보다 훨씬 흥미로운 중립 스케일을 만들어냅니다.

채도가 매우 낮은 색상은 평평해 보일 수 있습니다. 이미 회색에 가까운 색상(예: hsl(220, 8%, 50%))은 선명한 틴트와 셰이드를 만들어내지 못합니다. 스케일의 밝은 쪽은 거의 흰색처럼 보이고 어두운 쪽은 거의 검정처럼 보여서, 중간에 눈에 띄는 차별화가 거의 없습니다. 이것은 버그가 아니라 저채도 색상의 특성입니다.

생성된 팔레트는 출발점이지 최종 답이 아닙니다. HSL 기반 생성은 체계적이고 빠르지만, 특정 맥락에 대해서는 아무것도 모릅니다. 일부 생성된 밝은 셰이드는 텍스트에 충분한 대비가 없을 수 있습니다. 항상 실제 UI 사용에서 검증하고, 텍스트/배경 조합을 대비 검사기로 확인하세요.

전문적인 디자인 시스템에서는 지각적 균일성이 더 중요합니다. Tailwind v3의 팔레트는 자동 생성이 아니라 디자이너가 직접 조율했습니다. Radix Colors 같은 도구는 HSL보다 균등한 단계를 위해 더 정확한 OKLCH 색 공간을 사용합니다. 셰이드 생성기는 훌륭한 출발점을 제공하지만, 대규모 프로덕션 디자인 시스템의 경우 극단적인 값을 수동으로 조정할 필요가 있을 수 있습니다.

--color-500이라는 CSS 변수 이름은 일반적입니다. 도구는 --color-500 같은 변수 이름을 출력합니다. 프로젝트에 여러 색상 스케일이 있다면 이름을 바꿔야 합니다: --brand-500, --error-500, --neutral-200 등. 네임스페이스 없이 여러 팔레트를 :root에 넣으면 서로 덮어씁니다.

색상 작업 관련 도구들

셰이드 생성기는 더 넓은 색상 워크플로의 일부입니다:

Color Picker: 기본 색상을 시각적으로 선택하고 hex나 HSL 값을 얻은 다음 셰이드 생성기에 붙여넣을 수 있습니다.
Color Palette Generator: 먼저 조화로운 색상 조합을 찾은 다음, 각 색상에 대해 개별적으로 셰이드를 생성할 수 있습니다.
Color Converter: 생성된 HEX 값을 특정 컨텍스트에서 사용하기 위해 HSL이나 RGB로 변환해야 할 때.
CSS Gradient Generator: 셰이드 스케일이 있으면 인접한 단계 사이의 그라데이션이 멋지게 보일 수 있습니다. 그라데이션 도구를 사용하면 이를 직접 구성하고 미리볼 수 있습니다.

실제 예시: Tailwind에 커스텀 색상 추가하기

Tailwind 프로젝트에 커스텀 브랜드 색상을 추가하는 엔드투엔드 워크플로입니다:

브랜드 색상을 선택했습니다: #0D6EFD (강한 파랑).
/tools/color-shades-generator를 열고 #0D6EFD를 붙여넣습니다.
도구가 50~950 전체 스케일을 생성합니다.
Tailwind 설정 형식 출력을 복사합니다.
tailwind.config.ts의 theme.extend.colors.brand 아래에 추가합니다.
이제 버튼에 bg-brand-500, 어두운 텍스트에 text-brand-700, 흰색 표면의 호버 배경에 bg-brand-50, 포커스 링에 ring-brand-300을 사용할 수 있습니다.

생성기 없이는 11개의 셰이드를 모두 직접 선택해야 하고, 일관성 있게 보이도록 하는 것이 쉽지 않습니다. 생성기를 쓰면 전체 작업이 약 2분 안에 완료됩니다.

마무리

색상 스케일을 처음부터 만드는 것은 간단해 보이지만 사실 그렇지 않은 작업입니다. 단계가 시각적으로 균등하게 느껴지도록 만들고, 색조를 지루해 보이지 않으면서 일관되게 유지하고, 극단적인 값이 실제로 사용 가능하도록 하는 것 — 이 모든 것이 단순히 hex 값을 일정량씩 어둡게 하는 것보다 훨씬 더 많은 주의가 필요합니다.

Color Shades Generator는 이 모든 것을 자동으로 처리하고 여러 형식으로 CSS 준비 완료된 출력물을 제공합니다. 실제 프로젝트의 대다수를 커버하는 훌륭한 80% 솔루션이며, 나중에 수동으로 조정할 계획이 있더라도 올바른 출발점입니다.

디자인 시스템을 구축하고 있다면, Color Palette Generator로 색상을 선택하고 Color Converter로 형식을 검증하는 것을 이 도구와 함께 사용하면 전문적인 색상 기반을 빠르게 갖출 수 있습니다.