Tailwind 색상 클래스 변환, HEX가 안 맞는 이유와 기준
디자이너가 넘긴 #5D63E6 같은 HEX 색상이 Tailwind의 indigo-500(#6366F1)과 똑같지 않은 건 당연한 일입니다. Tailwind 기본 팔레트는 22개 색 계열 × 11단계(50~950)로 값이 고정돼 있고, 그 242개 값 중 어느 것과도 임의의 브랜드 컬러가 우연히 일치할 확률은 낮기 때문입니다. 그래서 필요한 건 "정확히 일치하는 클래스"가 아니라 가장 가까운 클래스를 고르는 기준입니다.
요약 ① Tailwind 기본 팔레트는 22계열 × 11단계, 총 242개 HEX 값이 계열별로 각각 고정돼 있습니다. ② 가장 가까운 클래스를 고르려면 사람 눈의 색 인지 차이를 반영한 색 거리 계산(redmean)이 필요합니다. ③ 다섯 개 후보 모두 거리 값이 크게 나온다면, 그 색은 Tailwind 기본 팔레트에 아예 없는 색일 가능성이 큽니다.
문제 — 브랜드 색은 Tailwind 팔레트 위에 있지 않습니다
Figma 시안에서 받은 브랜드 컬러를 bg-{색}-{단계} 형태의 Tailwind 클래스로 옮겨야 하는 상황을 생각해 보겠습니다. #5D63E6을 그대로 쓸 수는 없고, indigo, blue, violet 중 어느 계열의 몇 단계가 가장 비슷한지 정해야 합니다.
문제는 Tailwind의 50~900(950)단계가 한 계열의 밝기를 일정한 공식으로 나눈 값이 아니라는 점입니다. 계열마다, 단계마다 각각 따로 지정된 고정 HEX 값이라서 "밝기 ÷ 9단계" 같은 산수로는 역산이 되지 않습니다.
그러다 보니 눈대중으로 "이 정도면 indigo-500이겠지"라고 넘어가는 경우가 많은데, 계열을 잘못 짚으면(예: violet인데 indigo를 고름) 화면 전체 색감이 미묘하게 어긋난 채로 굳어집니다.
해결 — 색 거리를 직접 계산하면 눈대중 없이 정할 수 있습니다
가장 가까운 색을 정량적으로 고르는 방법은 두 색의 RGB 값 차이를 하나의 숫자(거리)로 계산해 가장 작은 값을 찾는 것입니다. 단순히 R·G·B 차이를 그대로 더하는 유클리드 거리도 가능하지만, 사람 눈은 세 색을 똑같은 비중으로 느끼지 않습니다.
green 채널 차이에 사람 눈이 더 민감하고, red·blue의 체감 차이는 전체 밝기(붉은기)에 따라 달라진다는 점을 반영한 근사식이 redmean입니다. 계산식은 이렇습니다.
rm = (R1 + R2) / 2
Δ = √[ (2 + rm/256) × (R1-R2)² + 4 × (G1-G2)² + (2 + (255-rm)/256) × (B1-B2)² ]
직접 손으로 해보면 이렇습니다. 브랜드 컬러 #5D63E6(R93 G99 B230)을 indigo-500 #6366F1(R99 G102 B241)과 비교하면 rm=96, Δ≈20.9가 나옵니다. 같은 색을 blue-600 #2563EB(R37 G99 B235)와 비교하면 rm=65, Δ≈84.5로 훨씬 멀어집니다.
숫자만 봐도 indigo-500이 blue-600보다 4배 가깝다는 걸 알 수 있습니다. 문제는 이 계산을 후보 하나하나마다 손으로 반복해야 한다는 점입니다. 계열이 22개, 단계가 11개라 전부 대조하려면 242번 계산해야 합니다.
저희 도구로 확인하면 이 242번의 계산을 자동으로 돌려 거리순으로 정렬한 상위 5개를 바로 보여줍니다.
설치·회원가입 없이 브라우저에서 바로 계산되며, 입력한 색상 값은 서버로 전송되지 않습니다.
자주 막히는 지점
| 상황 | 실제로 일어나는 일 |
|---|---|
#fff 같은 3자리 HEX | 각 자리를 두 번 반복해 6자리로 확장한 뒤 인식됩니다 |
rgb(93, 99, 230) 형식으로 입력 | 인식되지 않습니다. HEX(#RRGGBB)로 먼저 바꿔야 합니다 |
| 공백·길이 오류가 섞인 HEX | 계산되지 않고 형식 오류 안내만 표시됩니다 |
| Tailwind 설정에서 커스텀한 테마 색 | 매칭 대상이 아닙니다. 기본 22계열만 비교합니다 |
| Δ 값에 "충분히 가깝다"는 절대 기준 | 정해진 임계치가 없어, 최종 판단은 화면에 놓고 눈으로 대조하는 편이 안전합니다 |
세 번째와 네 번째가 특히 자주 놓치는 지점입니다. 프로젝트에서 tailwind.config에 브랜드 전용 색을 추가해 두었다면, 그 색은 이 도구가 비교하는 242개 후보에 들어 있지 않아 아무리 가까운 후보를 골라도 원본과 다른 색입니다.
정리
- Tailwind 기본 팔레트는 22계열 × 11단계, 총 242개 고정 HEX 값입니다. 계열별 공식이 아니라 각 값이 개별적으로 정해져 있습니다.
- 임의의 HEX와 가장 가까운 클래스는 유클리드 거리가 아니라, 사람 눈의 채널별 민감도를 반영한 redmean 거리로 찾는 편이 실제 체감과 더 잘 맞습니다.
- 손으로 계산할 때는 rm=(R1+R2)/2를 구한 뒤 위 식에 대입하면 되지만, 후보가 많을 때는 도구로 한 번에 정렬하는 편이 빠릅니다.
- 후보 다섯 개 모두 Δ 값이 크게 나온다면 Tailwind 기본 팔레트가 아니라 프로젝트 전용 커스텀 색을 쓰는 게 색상 정확도 면에서 낫습니다.
- 반대로 계열·단계를 알고 있다면 클래스 → HEX 탭에서 정확한 HEX·RGB 값을 바로 확인할 수 있습니다.
설치·회원가입 없이 브라우저에서 바로 계산되며, 입력한 색상 값은 서버로 전송되지 않습니다.
자주 묻는 질문
Tailwind 커스텀 테마 색상도 변환되나요?
아니요. 이 도구는 Tailwind CSS 기본 팔레트(22계열 × 11단계)만을 비교 대상으로 삼습니다. tailwind.config에서 직접 추가하거나 덮어쓴 브랜드 전용 색상은 242개 후보 목록에 포함되지 않으므로, 그 색을 찾으려는 검색에서는 항상 "가장 비슷한 기본 색"만 나옵니다.
Δ(델타) 값은 어느 정도면 "충분히 가깝다"고 볼 수 있나요?
정해진 기준값은 없습니다. Δ는 redmean 방식으로 계산한 상대적인 색 거리라서, 값이 작을수록 원본과 비슷하다는 의미는 분명하지만 "10 이하면 합격" 같은 절대 기준은 색조합·화면 환경에 따라 달라집니다. 후보를 실제 화면 배경 위에 놓고 눈으로 대조하는 과정을 한 번 거치는 편이 안전합니다.
클래스 이름만 알고 정확한 HEX 값을 확인하려면 어떻게 하나요?
클래스 → HEX 탭에서 색 계열과 명도(shade)를 각각 드롭다운으로 선택하면 됩니다. 예를 들어 sky와 600을 고르면 해당 클래스의 정확한 HEX·RGB 값이 바로 나오고, HEX 값과 bg-sky-600 형태의 클래스명을 각각 복사 버튼으로 받을 수 있습니다.