색상 이름, 기준 색상
brand-500 #2362EB
- CSS 변수
- --color-brand-50: #F2F5FD; --color-brand-100: #DEE8FC; --color-brand-200: #BED0F9; --color-brand-300: #8FAFF5; --color-brand-400: #5787F0; --color-brand-500: #2362EB; --color-brand-600: #134FD2; --color-brand-700: #0F3FA8; --color-brand-800: #0C2F7E; --color-brand-900: #09235D; --color-brand-950: #091634;
- Tailwind 객체
- brand: { 50: "#F2F5FD", 100: "#DEE8FC", 200: "#BED0F9", 300: "#8FAFF5", 400: "#5787F0", 500: "#2362EB", 600: "#134FD2", 700: "#0F3FA8", 800: "#0C2F7E", 900: "#09235D", 950: "#091634" }
- 기준 HEX
- #2563EB
- 단계 수
- 11단계
Tailwind 공식 팔레트와 동일한 값이 아니라, 공식 shade 체계(50~950)에 맞춰 입력 색상에서 생성한 근사 팔레트입니다.
계산 방법과 기준
Tailwind CSS는 50부터 950까지의 shade 이름을 색상 토큰으로 사용합니다. 이 도구는 입력 HEX의 hue를 유지하면서 lightness 단계를 조정해 커스텀 팔레트 초안을 만듭니다.
계산식과 처리 기준
- HEX -> HSL
- shade 50~950별 lightness 단계 적용
- HSL -> HEX -> CSS 변수/Tailwind 객체 출력
계산 예시
브랜드 색 #2563EB로 50~950 팔레트를 만들면?
- 색상 이름
- “brand”
- 기준 색상
- “#2563EB”
결과brand-500 #2362EB
Tailwind의 50~950 shade 네이밍에 맞춘 근사 색상 스케일을 생성했습니다.
초록 #16A34A로 success 팔레트를 만들면?
- 색상 이름
- “success”
- 기준 색상
- “#16A34A”
결과success-500 #2CE26F
Tailwind의 50~950 shade 네이밍에 맞춘 근사 색상 스케일을 생성했습니다.
Tailwind shade 역할
| Shade | 일반적 용도 | 특징 |
|---|---|---|
| 50~100 | 배경, subtle surface | 매우 밝은 톤 |
| 200~400 | border, hover, muted UI | 중간 밝기 보조 톤 |
| 500~600 | 브랜드 기본색, 버튼 | 주요 액션 톤 |
| 700~950 | 텍스트, 강조, 어두운 배경 | 높은 대비 톤 |
주의사항
- 자동 생성 스케일은 Tailwind 기본 팔레트와 명도 곡선이 다를 수 있습니다. 버튼·텍스트에 쓸 단계는 명도 대비를 확인하세요.
Tailwind 색상 팔레트는 어떻게 만드나요?
기준 색에서 50~900 단계의 명도 팔레트를 생성해 tailwind.config에 바로 넣을 수 있습니다.
- 생성값은 Tailwind 공식 기본 팔레트가 아니라 커스텀 색상 초안입니다.
- 500 shade가 브랜드 기준색에 가장 가깝도록 설계했습니다.
- 접근성 검토가 필요한 텍스트/배경 조합은 대비 계산기로 추가 확인하세요.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리