Tailwind 색상 변환기
HEX를 가장 가까운 Tailwind 색 클래스로, 클래스는 다시 HEX로 즉시 변환
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
임의의 HEX 색상을 Tailwind CSS 기본 팔레트(22개 계열 × 11단계, 총 242색) 중 지각적으로 가장 가까운 클래스로 매칭해 줍니다. 반대로 색 계열과 명도(shade)를 고르면 해당 클래스의 정확한 HEX·RGB 값을 바로 확인하고 복사할 수 있습니다.
사용 방법
- 'HEX → 클래스' 탭에서 색상 피커나 HEX 입력창으로 색을 지정합니다.
- 가장 가까운 Tailwind 클래스와 후보 색, Δ(색 거리)를 확인하고 클래스·HEX·bg- 유틸을 복사합니다.
- '클래스 → HEX' 탭에서는 색 계열과 명도를 선택하면 HEX·RGB 값이 표시됩니다.
- 필요한 값 옆의 복사 버튼으로 코드에 바로 붙여넣습니다.
자주 묻는 질문
- 왜 실제 색과 매칭된 클래스 색이 조금 달라요?
- Tailwind 기본 팔레트는 정해진 242개 색만 있어 임의의 HEX와 완전히 같을 수는 없습니다. 이 도구는 지각 근사(redmean) 색 거리로 가장 비슷한 색을 골라 주며, 표시되는 Δ 값이 작을수록 원본과 가깝습니다.
- Tailwind v4에서도 그대로 쓸 수 있나요?
- 기본 팔레트의 색상값은 v3와 v4가 사실상 동일해 대부분 그대로 활용할 수 있습니다. 다만 프로젝트에서 테마 색을 커스텀으로 재정의했다면 그 설정을 따라야 합니다.
- 입력한 색이 서버로 전송되나요?
- 아니요. 모든 변환은 브라우저 안에서만 처리되며 어떤 데이터도 전송·저장되지 않습니다. 결과 클래스명은 참고용이니 실제 디자인 시스템 값과 대조해 사용하세요.