HEX → 가장 가까운 Tailwind 클래스

HEX → Tailwind 매칭 사용법

1. HEX 코드를 입력하거나 피커로 색을 고릅니다.
2. 원하는 속성(bg / text / border / ring / fill)을 선택합니다.
3. 가장 가까운 Tailwind 클래스와 거리(ΔE)가 표시됩니다.
4. 대안 5개도 함께 보여서 디자이너와 협의할 때 활용합니다.
5. 클릭 한 번으로 클래스명을 복사합니다.

주요 기능

• Tailwind v3 + v4 전체 컬러(242개) 검색
• OKLCH 기반 지각적 거리 또는 RGB 유클리드 거리
• 5가지 속성 prefix (bg / text / border / ring / fill)
• 1순위 + 대안 5개 동시 표시
• 클릭 한 번 복사

활용 예시

• Figma 시안 → Tailwind 코드 — 디자이너가 준 HEX를 Tailwind로 변환
• 브랜드 컬러 유사 매칭 — 가장 비슷한 Tailwind 컬러 찾기
• 레거시 CSS → Tailwind 마이그레이션 — 기존 코드 색상 변환
• 스토리북 디자인 토큰 — Tailwind 기본 팔레트 활용
• 다크모드 페어링 — 라이트 색의 어두운 변형 찾기

OKLCH 거리 vs RGB 거리

OKLCH 지각적 거리(ΔE)는 인간의 눈이 느끼는 색 차이로 매칭합니다 — 분홍색을 입력하면 진짜로 비슷해 보이는 핑크 계열을 찾습니다. RGB 유클리드 거리는 R·G·B 값의 차이 합인데, 같은 거리라도 색조에 따라 인지 차이가 다릅니다(노란색은 작은 거리에도 다르게 보임). 정확한 매칭이 필요하면 OKLCH를 추천합니다. 단순 비교는 RGB가 빠릅니다.

자주 묻는 질문