Tailwind 색상 팔레트 생성기
색상 하나로 Tailwind CSS 스타일의 50~950 팔레트를 자동 생성합니다.
기준 단계: 500
명도 대비 (Contrast Ratio)
| 단계 | 색상 | vs 흰색 | vs 검정 | 텍스트 미리보기 |
|---|---|---|---|---|
| 50 | 1.1:1Fail | 19.3:1AAA | AaAa | |
| 100 | 1.2:1Fail | 17.1:1AAA | AaAa | |
| 200 | 1.5:1Fail | 14.2:1AAA | AaAa | |
| 300 | 1.9:1Fail | 10.9:1AAA | AaAa | |
| 400 | 2.7:1Fail | 7.8:1AAA | AaAa | |
| 500 | 4.0:1Fail | 5.2:1AA | AaAa | |
| 600 | 5.7:1AA | 3.7:1Fail | AaAa | |
| 700 | 8.0:1AAA | 2.6:1Fail | AaAa | |
| 800 | 11.2:1AAA | 1.9:1Fail | AaAa | |
| 900 | 15.3:1AAA | 1.4:1Fail | AaAa | |
| 950 | 19.7:1AAA | 1.1:1Fail | AaAa |
코드 내보내기
custom: {
50: '#f0f6ff',
100: '#dbe9ff',
200: '#bcd6ff',
300: '#92bcff',
400: '#619dff',
500: '#347bee',
600: '#1961d2',
700: '#004ab2',
800: '#003687',
900: '#00225a',
950: '#000924',
}OKLCH 기반 팔레트 생성 원리
이 도구는 OKLCH 색공간에서 밝기(Lightness)를 체계적으로 조절하여 팔레트를 생성합니다. OKLCH는 인간의 시각 인지에 기반한 균일한 색공간으로, HSL이나 RGB에서 단순히 밝기를 조절하는 것보다 훨씬 자연스러운 색상 단계를 만들어냅니다. Tailwind CSS v4에서도 OKLCH를 기본 색공간으로 채택하고 있어, 이 도구로 생성한 팔레트는 Tailwind의 기본 색상과 조화롭게 사용할 수 있습니다.
팔레트의 각 단계(50~950)에는 고정된 목표 밝기가 할당됩니다. 50단계는 거의 흰색에 가까운 L≈97%로, 950단계는 매우 어두운 L≈15%로 설정됩니다. 채도(Chroma)와 색상각(Hue)은 기준색을 유지하되, 극단적인 밝기 영역에서는 sRGB 색역(gamut)의 물리적 한계에 맞춰 채도를 자연스럽게 줄여줍니다. 이를 통해 밝은 단계에서는 은은한 틴트(tint), 어두운 단계에서는 깊이 있는 셰이드(shade)가 만들어집니다.
생성된 팔레트는 WCAG 명도 대비 기준으로 접근성도 함께 검증됩니다. 각 단계별로 흰색·검정 배경 대비 비율이 계산되어, AA(4.5:1) 및 AAA(7:1) 기준 통과 여부를 한눈에 확인할 수 있습니다. 이를 통해 디자인 시스템에서 텍스트 가독성과 접근성을 동시에 확보할 수 있습니다.