Tailwind 색상 찾기이란?
Tailwind Color Finder는 hex, rgb(), hsl(), teal 같은 CSS 색상 이름까지 어떤 색상 값이든 받아 가장 가까운 Tailwind CSS 유틸리티 클래스를 즉시 알려줍니다. 팔레트를 눈으로 비교할 필요 없이 디자인 툴의 값을 붙여 넣으면 코드에 바로 쓸 정확한 클래스 이름이 나옵니다.
매칭은 단순한 RGB 차이 대신 CIE Lab 공간의 지각 거리(ΔE)를 사용하므로, 숫자상 가장 가까운 색이 아니라 눈에 가장 비슷해 보이는 색이 선택됩니다. Tailwind v3/v4의 기본 팔레트 전체, slate부터 rose까지의 색 계열, 50~950 음영, 검정과 흰색까지 탐색합니다. 상위 10개를 거리 점수와 함께 보여줘 색상과 명도를 어떻게 절충할지 직접 고를 수 있습니다.
사용 방법
- 디자인 시안에서 가져온 헥스 색상 코드를 입력하거나 컬러 피커로 색상을 선택하세요.
- 도구가 가장 가까운 Tailwind CSS 색상 클래스를 시각적인 나란히 비교와 함께 즉시 보여줍니다.
- Tailwind 클래스명(예: bg-blue-500)을 복사하여 코드에 바로 붙여넣으세요. 색상 거리 값으로 일치 정도를 확인할 수 있습니다.
사용 시기
- 브랜드나 Figma에서 받은 hex 값을 새 프로젝트의 Tailwind 클래스로 옮길 때.
- 하드코딩된 hex가 흩어진 옛 스타일시트를 유틸리티 클래스로 마이그레이션할 때.
- 디자이너가 hex 하나만 줬을 때 red-500과 rose-500 중 의미상 적절한 톤을 고를 때.
결과
디자이너가 브랜드 색상 #2563EB를 전달합니다. 붙여넣으면 blue-500과 정확히 일치함을 보여줍니다. #3A7BC8의 경우 sky-600이 가장 가까운 매치로 표시되며 거리 점수로 얼마나 근접한지 확인할 수 있습니다.
자주 묻는 질문
- 어떤 Tailwind 색이 가장 가까운지 어떻게 판단하나요?
- 두 hex 값을 모두 CIE Lab으로 변환한 다음 ΔE76 거리를 계산합니다. ΔE76은 두 색의 시각적 차이를 근사하는 지표로, 1 이하면 거의 구분이 안 되고 5를 넘으면 색상이나 밝기 차이가 뚜렷해집니다.
- 어느 버전의 Tailwind 팔레트를 사용하나요?
- v3/v4 기본 팔레트입니다. slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose 등 22개 계열 × 50~950 음영에 검정과 흰색을 더했고, 프로젝트별 커스텀 색은 포함되지 않습니다.
- 입력한 hex가 예상 외의 음영으로 매칭되는 이유는?
- Lab 거리는 색상, 채도, 명도를 함께 따집니다. 어둑한 녹색은 밝은 teal보다 slate에 더 가까울 수 있는데, 명도 차이가 더 크기 때문입니다. 1위가 어색하면 상위 10개를 훑어 색상 계열 기준으로 다시 골라보세요.
- 결과를 Tailwind 클래스 대신 CSS 변수로 복사할 수 있나요?
- 세부 패널에 클래스 이름(bg-blue-500)과 hex가 함께 표시됩니다. CSS 커스텀 프로퍼티 방식이라면 hex를 복사해 var(--brand) 안에 넣어 사용하면 됩니다. 또한 팔레트에서 충분히 가까운 색이 없을 때는 정확한 색으로 만든 임의 값 클래스(bg-[#hex])를 함께 보여줘, 테마를 건드리지 않고도 픽셀 단위로 정확하게 쓸 수 있습니다.
- hex 대신 rgb(), hsl(), CSS 색상 이름을 붙여 넣어도 되나요?
- 네. 입력칸은 hex(#2563EB 또는 2563EB, 3자리·6자리), rgb()/rgba(), hsl()/hsla()(색상 각도에 deg를 붙여도 되고 단위가 없어도 됩니다), 그리고 모든 CSS 명명 색상(teal, rebeccapurple, cornflowerblue 등)을 모두 인식합니다. 알파 채널은 무시되며 불투명한 RGB 값으로 매칭이 진행됩니다.