Tailwind 색상 찾기이란?

Tailwind Color Finder는 임의의 헥스 색상값을 입력하면 가장 가까운 Tailwind CSS 유틸리티 클래스를 즉시 찾아줍니다. 색상 팔레트를 눈으로 비교하는 대신 디자인 도구에서 헥스 코드를 붙여넣고 마크업에 사용할 정확한 Tailwind 클래스명을 바로 얻으세요.

사용 방법

1. 디자인 시안에서 가져온 헥스 색상 코드를 입력하거나 컬러 피커로 색상을 선택하세요.
2. 도구가 가장 가까운 Tailwind CSS 색상 클래스를 시각적인 나란히 비교와 함께 즉시 보여줍니다.
3. Tailwind 클래스명(예: bg-blue-500)을 복사하여 코드에 바로 붙여넣으세요. 색상 거리 값으로 일치 정도를 확인할 수 있습니다.

결과

디자이너가 브랜드 색상 #2563EB를 전달합니다. 붙여넣으면 blue-500과 정확히 일치함을 보여줍니다. #3A7BC8의 경우 sky-600이 가장 가까운 매치로 표시되며 거리 점수로 얼마나 근접한지 확인할 수 있습니다.

관련 도구