계산 로직과 결과 카드가 연결된 상태입니다.
개발계산 가능
Tailwind CSS 색상 생성기
기준 색상으로 Tailwind CSS 50~950 shade 스케일을 생성합니다.
결과 대기 중
이 계산기를 이렇게 설계했습니다.
Tailwind CSS는 50부터 950까지의 shade 이름을 색상 토큰으로 사용합니다. 이 도구는 입력 HEX의 hue를 유지하면서 lightness 단계를 조정해 커스텀 팔레트 초안을 만듭니다.
계산식 기준
- HEX -> HSL
- shade 50~950별 lightness 단계 적용
- HSL -> HEX -> CSS 변수/Tailwind 객체 출력
Tailwind shade 역할
| Shade | 일반적 용도 | 특징 |
|---|---|---|
| 50~100 | 배경, subtle surface | 매우 밝은 톤 |
| 200~400 | border, hover, muted UI | 중간 밝기 보조 톤 |
| 500~600 | 브랜드 기본색, 버튼 | 주요 액션 톤 |
| 700~950 | 텍스트, 강조, 어두운 배경 | 높은 대비 톤 |
계산식에 사용된 방법
- 색상 이름와 기준 색상 값을 입력 형식에 맞게 확인한 뒤 계산합니다.
- 형식과 입력 규칙을 검증한 뒤 개발 도구 목적에 맞는 생성 또는 변환을 적용합니다.
- 결과는 검산과 복사에 바로 쓰기 쉬운 형태로 보여주는 방식을 사용합니다.
주의사항
- 텍스트, 시간, 코드 입력은 예시 형식과 다르면 계산이 제한되거나 결과가 달라질 수 있습니다.
- 언어, 런타임, 인코딩, 환경 차이에 따라 실제 결과가 다르게 보일 수 있습니다.
Tailwind 색상 팔레트는 어떻게 만드나요?
기준 색에서 50~900 단계의 명도 팔레트를 생성해 tailwind.config에 바로 넣을 수 있습니다.
- 생성값은 Tailwind 공식 기본 팔레트가 아니라 커스텀 색상 초안입니다.
- 500 shade가 브랜드 기준색에 가장 가깝도록 설계했습니다.
- 접근성 검토가 필요한 텍스트/배경 조합은 대비 계산기로 추가 확인하세요.