색상 이름, 기준 색상
결과 대기 중
계산 방법과 기준
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 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리