Tailwind CSS 색상 참조표

이 도구는 무엇인가요?

Tailwind CSS는 일반적인 UI 색상에 임의의 값을 선택하게 하는 대신 고정된 기본 색상 스케일을 제공합니다. amber나 slate 같은 22개의 명명된 색상군 각각은 정확히 11개의 명암을 가지며, 50부터 950까지 번호가 매겨져 있고, 각 명암은 Tailwind 자체에서 문서화한 하나의 공식 HEX 값을 가지며 bg-, text-, border-, ring- 유틸리티에서 동일하게 사용됩니다.

이 참조표는 완전한 공식 팔레트를 로컬에 내장하므로, 색상이나 클래스 이름을 조회하기 위해 Tailwind 문서를 열거나, 빌드를 실행하거나, 단지 어떻게 보이는지 확인하려고 클래스를 PurgeCSS에 통과시킬 필요가 없습니다. HEX 조회는 RGB 유클리드 거리를 사용하여 가장 가까운 공식 명암을 찾으며, 클래스 조회는 정확합니다 — 여기의 모든 값은 Tailwind에서 문서화한 기본값과 일치합니다.

왜 사용해야 할까요?

• 디자인 파일이나 스크린샷에서 HEX 코드를 붙여넣으면, 어떤 번호의 명암에 해당하는지 추측할 필요 없이 즉시 가장 가까운 Tailwind 클래스 이름을 얻습니다.
• slate-900이나 bg-purple-500 같은 클래스 이름을 입력하여 Tailwind 문서를 뒤지지 않고도 정확한 HEX 및 RGB 값을 확인하세요.
• 22개 색상군 × 11개 명암의 전체 그리드를 탐색하여 선택하기 전에 명암을 나란히 비교하세요.
• Tailwind는 모든 곳에서 동일한 숫자 스케일을 사용하므로, 클릭 한 번으로 모든 명암의 bg-, text-, border-, ring- 변형을 얻을 수 있습니다.
• 무료, 즉시, 완전히 로컬에서 실행 — 업로드 불필요, 계정 불필요, 빌드 단계 불필요.

사용 방법

1. HEX 코드로 클래스 이름을 찾으려면: 검색 상자에 HEX 값(# 유무 상관없음)을 입력하거나 붙여넣으세요 — 그리드 위에 가장 가까운 공식 Tailwind 명암이 나타나며, 정확히 일치하지 않는 경우 색상 거리도 함께 표시됩니다.
2. 클래스 이름으로 HEX 값을 찾으려면: 클래스 또는 색상군 이름(예: amber-500, bg-blue-600, 또는 teal만)을 입력하세요 — 정확히 일치하면 HEX, RGB, 그리고 모든 유틸리티 변형이 표시됩니다. 색상군 이름만 입력하면 그리드가 해당 색상군으로 필터링됩니다.
3. 모두 탐색하려면: 검색 상자를 비워두고 그리드에서 아무 스와치나 클릭하세요 — 세부 정보가 위쪽 패널에 나타나고 HEX 코드가 자동으로 복사됩니다.
4. 세부 정보 패널의 bg-/text-/border-/ring- 변형 버튼 중 하나를 클릭하여 해당 정확한 클래스 이름을 복사하세요.

예시

입력

#c4b5fd

결과

violet-300 — 정확히 일치, #C4B5FD, rgb(196, 181, 253)

이 HEX 값은 Tailwind 자체에서 문서화한 기본값 중 하나이므로 거리는 0이며, 근사치가 아닌 정확한 일치입니다.

자주 묻는 질문