색상 → Tailwind

색상-Tailwind 변환기란?

이 도구는 입력한 색상과 가장 가까운 Tailwind CSS 클래스를 찾아줍니다. Tailwind는 red, blue, green 등 이름이 지정된 색상 계열에서 50~950 단계의 신중하게 설계된 기본 색상 팔레트를 제공합니다. 브랜드 색상이나 디자인에서 가져온 HEX 값이 있을 때, 이 변환기는 가장 가까운 Tailwind 유틸리티 클래스를 즉시 알려줍니다.

사용 방법

1. HEX 색상(예: #3b82f6) 또는 RGB 값(예: rgb(59,130,246))을 입력합니다.
2. 색상 선택기를 사용하여 시각적으로 선택할 수도 있습니다.
3. “가장 가까운 Tailwind 색상 찾기”를 클릭하여 결과를 확인합니다.
4. 일치하는 Tailwind 클래스, 색상 거리, 나란히 비교를 확인할 수 있습니다.

색상 거리 이해하기

이 도구는 입력한 색상과 Tailwind v3 팔레트의 각 색상 간 RGB 색상 공간에서의 유클리드 거리를 계산합니다. 거리가 0이면 정확히 일치합니다. 값이 작을수록 더 가까운 일치입니다. 디자인에 가장 적합한 옵션을 선택할 수 있도록 가장 가까운 5가지 색상이 표시됩니다.

자주 묻는 질문

Tailwind의 모든 기본 색상을 지원하나요?

네, Tailwind v3 기본 팔레트의 모든 이름이 지정된 색상을 포함합니다. slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose 각각 50~950 단계가 포함되어 있습니다.

가까운 일치가 없는 경우 어떻게 하나요?

Tailwind 색조와 거리가 먼 색상의 경우, Tailwind의 임의값 구문인 bg-[#1a2b3c]을 사용하여 CSS에서 정확한 색상을 지정할 수 있습니다.