Color Token Generator

모든 디자인 시스템에 컬러 스케일이 필요한 이유

컬러 스케일은 일관된 비주얼 언어의 근간입니다. 이것이 없으면 디자이너와 개발자는 임시방편으로 결정을 내리게 됩니다——「호버에는 조금 더 어두운 파란색」 또는 「카드 배경에는 매우 밝은 버전」——이런 식으로 체계적인 관계 없이 수십 개의 거의 동일한 hex 값이 생겨납니다. 시간이 지나면 한 번에 업데이트하기 불가능한 일회성 컬러 값으로 코드베이스가 가득 찹니다.

잘 구성된 11단계 스케일이 이를 해결합니다. 밝은 단계(50–200)는 색조가 있는 서피스와 배경에, 중간 단계(300–600)는 버튼, 링크, 포커스 링 같은 인터랙티브 요소에, 어두운 단계(700–950)는 텍스트와 고대비 테두리에 사용됩니다. 모든 결정은 스케일로 귀결되며, 브랜드 컬러를 변경하면 스타일시트에서 수백 개의 hex 코드를 찾아다닐 필요 없이 베이스 값 하나만 업데이트하면 됩니다.

Tailwind 컬러 스케일 컨벤션

Tailwind CSS는 11단계 숫자 명명 컨벤션——50, 100, 200부터 900, 950——을 대중화시켰고, 이후 Radix UI, shadcn/ui, Material Design 3과 대부분의 현대 컴포넌트 라이브러리 생태계가 이를 표준으로 채택했습니다. 장점은 예측 가능성입니다. 이러한 시스템을 사용해본 개발자라면 500단계 토큰이 중간 범위 베이스 컬러이고, 100단계는 매우 밝은 틴트이며, 800단계는 밝은 배경에서 사용하는 어두운 쉐이드임을 즉시 알 수 있습니다.

이 도구는 Tailwind 내장 팔레트(파란색, 빨간색, 초록색 등)와 시각적으로 호환되는 스케일을 생성하므로, Tailwind 기본값과 자연스럽게 통합되는 사용자 정의 브랜드 컬러를 쉽게 추가할 수 있습니다. Tailwind 내보내기 형식은 tailwindConfig.js의 theme.extend.colors가 기대하는 형식과 정확히 일치하고, CSS 변수 내보내기는 Tailwind v4의 @theme 블록에 맞게 포맷되어 있습니다.

WCAG 대비율 이해하기

텍스트 컬러와 배경 사이의 대비율은 상대 밝기——각 컬러가 인간의 눈에 얼마나 밝게 보이는지의 척도——로 계산됩니다. WCAG 공식은 (L1 + 0.05) / (L2 + 0.05)이며, L1은 밝은 컬러의 밝기이고 L2는 어두운 컬러의 밝기입니다. 결과는 1:1(동일한 컬러, 대비 없음)에서 21:1(흰 배경에 검은 텍스트, 최대 대비)까지 범위입니다.

WCAG AA는 일반 텍스트에 4.5:1, 큰 텍스트(18pt+)에 3:1을 요구합니다. 이 도구에서는 각 스워치의 흰색 텍스트와 검은색 텍스트 대비율이 계산되어 W✓와 B✓ 배지로 표시됩니다. 중간 스케일 단계(400–600)는 일반적으로 두 임계값 모두 실패합니다——이들은 장식적 채우기와 인터랙티브 강조색을 위해 설계되었으며, 텍스트 배경용이 아닙니다.

컬러 스페이스: HSL, OKLCH 그리고 중요한 이유

전통적인 팔레트 생성기는 HSL——색조(Hue), 채도(Saturation), 밝기(Lightness)——에서 작동합니다. HSL은 직관적이고 잘 지원되지만 지각적으로 균일하지 않습니다. 동일한 수치의 밝기 단계가 색조에 따라 극적으로 다르게 보입니다. 50%에서 60% 밝기로의 변화는 파란색에서는 큰 점프처럼 보이지만 노란색에서는 작은 단계에 불과합니다. 인간의 눈이 스펙트럼 전체에서 색을 다르게 인식하기 때문입니다.

OKLCH는 지각적으로 균일한 컬러 스페이스로, 색조에 관계없이 동일한 수치의 밝기 단계가 인간의 눈에 동일하게 보입니다. Tailwind CSS v4가 이 이유로 내부적으로 OKLCH로 전환했습니다. 팔레트 생성기에서 OKLCH는 각 단계가 정말로 더 밝거나 더 어두운 방향으로 균일한 단계처럼 보이는 스케일을 생성합니다——일관된 지각적 단계가 스케일 전체에서 대비율을 안정적으로 예측하는 데 필요한 접근 가능한 팔레트 디자인에 특히 가치 있습니다.

CSS, Tailwind, SCSS, JSON, DTCG로 내보내기

CSS 변수 내보내기는 :root { } 내에서 --color-N 명명 패턴을 사용합니다. Tailwind 내보내기는 tailwindConfig.js의 theme.extend.colors에 바로 들어갑니다——'color'를 토큰 이름(예: 'primary' 또는 'brand')으로 변경하세요. SCSS 내보내기는 Sass 및 Less와 호환되는 $color-N 변수 구문을 사용합니다. JSON 내보내기는 W3C DTCG 토큰 형식을 따르며 Style Dictionary, Theo, Supernova 등 현대 토큰 파이프라인 생태계의 모든 도구와 호환됩니다.

네 가지 형식 모두 동일한 11개의 hex 값을 출력하므로 생성 후 형식 간 전환은 변경이 필요 없습니다. 개별 스워치를 클릭하면 hex 값이 클립보드에 직접 복사됩니다——Figma 디자인 파일, 일회성 인라인 스타일, 또는 전체 내보내기 없이 빠른 컬러 참조가 필요할 때 유용합니다.

Coolors, Adobe Color, Material Design Color Tool과의 비교

Coolors.co는 무작위 5색 조합을 생성하도록 설계된 팔레트 발견 도구입니다. 영감을 얻기에는 훌륭하지만 토큰 스케일을 생성하지 않고, Tailwind 설정을 출력하지 않으며, 스워치별 WCAG 대비 배지를 표시하지 않습니다.

Adobe Color는 컬러 휠에서 컬러 하모니 생성과 일부 내보내기 옵션을 제공하지만, 팔레트를 저장하고 내보내려면 Adobe 계정이 필요합니다. Tailwind 호환 컬러 스케일이나 DTCG JSON을 생성하지 않고 단계별 대비율 표시도 없습니다.

Google의 Material Design Color Tool은 10단계 스케일(50단계 없음)을 생성하며 Material Design 테마용으로 특별히 설계되어 있어 출력이 Tailwind나 다른 생태계에 깔끔하게 매핑되지 않습니다.

이 도구는 완전한 11단계 스케일을 생성하고, 모든 스워치에 WCAG W✓/B✓ 배지를 표시하며, 네 가지 형식으로 내보내고, 로그인이 필요 없습니다. 모든 것이 브라우저에서 실행됩니다——컬러 데이터는 서버에 업로드되지 않습니다.