Tailwind CSS의 표준 컬러 팔레트 242색을 한 화면에서 봅니다. 색상 클릭으로 HEX 복사, 라벨 클릭으로 클래스명(예: bg-blue-500) 복사.

Tailwind 컬러 팔레트 사용법

  1. 22개 컬러 그룹이 11단계(50~950)로 표시됩니다.
  2. 색상 박스 클릭 → HEX 복사.
  3. 라벨(예: blue-500) 클릭 → Tailwind 클래스명 복사 형태로 사용.
  4. 검색으로 특정 컬러 그룹만 필터링 가능.

주요 기능

  • 22개 컬러 그룹 (slate, gray, zinc, ..., rose) 전체 라이브러리
  • 각 그룹 11단계 (50, 100, 200, ..., 900, 950)
  • HEX 코드 즉시 복사
  • 실시간 검색

활용 예시

  • Tailwind 사용 시 색 빠르게 참조
  • 디자인 시스템 컬러 토큰 비교 자료
  • 피그마·스케치에서 사용할 정확한 HEX 추출
  • Tailwind 외 프로젝트에 동일 색 적용

Tailwind 컬러 시스템

Tailwind CSS는 22개의 컬러 그룹을 제공하며 각각 11단계(50, 100, 200, ..., 900, 950)로 구성됩니다. 50은 가장 밝고 950은 가장 어두우며, 500이 본 색입니다. 이 시스템은 모든 모던 디자인 시스템의 사실상 표준이 되었습니다.

자주 묻는 질문

이 색은 어떤 Tailwind 버전 기준인가요?

Tailwind CSS v3 기준입니다. v2까지는 950 단계가 없었으며, v3부터 11단계로 확장되었습니다.

커스텀 색을 만들 때 참고할만한 단계는?

500을 본 색으로 정한 후 명도를 11단계로 분포시키는 것이 표준입니다. 자동으로 만들려면 컬러 셰이드 생성기를 사용하세요.

Material Design 컬러와 차이는?

Material Design은 14단계(50, 100~900, A100~A700)이며 액센트 색이 별도로 있습니다. Tailwind는 11단계로 더 단순하고 액센트 없이 일관된 그라데이션입니다.

접근성(WCAG) 대비 기준은?

일반적으로 50~200 배경 + 700~900 텍스트, 또는 800~900 배경 + 50~200 텍스트 조합이 WCAG AA를 통과합니다. 각 조합은 색상 대비 검사기로 확인하세요.