베이스 컬러 1개 → Tailwind 11단계 셰이드(50~950) 자동 생성. tailwind.config.js / CSS 변수로 즉시 복사.
🎚️ 11단계 셰이드
tailwind.config.js
CSS 변수

Tailwind 셰이드 생성기 사용법

  1. 베이스 컬러를 선택합니다 (브랜드 메인 컬러 = 보통 500단계).
  2. 색상명을 입력합니다 (예: brand, primary).
  3. 50, 100, 200, ... 900, 950 셰이드가 자동 생성됩니다.
  4. tailwind.config.js 또는 CSS 변수 형식으로 복사합니다.
  5. 밝기 보정 슬라이더로 미세 조정합니다.

주요 기능

  • Tailwind v3·v4 호환 11단계 (50/100/200/300/400/500/600/700/800/900/950)
  • OKLCH 기반 인지적 균일 밝기 분포
  • tailwind.config.js + CSS 변수 두 형식 동시 export
  • 채도 자동 곡선 (다크에서 약간 감소, 라이트에서 약간 증가)
  • 한 번에 복사 가능

활용 예시

  • 디자인 시스템 구축 — 브랜드 컬러 1개 → 전체 팔레트 완성
  • Tailwind 커스텀 — config.js extend.colors에 직접 붙여넣기
  • 일관된 hover/active 상태 — bg-brand-500 → hover:bg-brand-600 자연스럽게
  • 다크모드 페어링 — 라이트 100/200 ↔ 다크 800/900
  • Figma 디자인 토큰 — CSS 변수 그대로 import

Tailwind 셰이드 체계 알아보기

Tailwind CSS의 색상 체계는 50(가장 밝음) ~ 950(가장 어두움)의 11단계 표준을 따릅니다. 500이 보통 브랜드 본색에 해당하며, 400/600은 hover·active 상태, 50/100은 배경, 900/950은 다크모드 본문 배경에 자주 쓰입니다. Tailwind v4부터 OKLCH 기반 컬러로 전환되어 셰이드 간 밝기 점프가 인지적으로 균일해졌습니다. 본 도구도 OKLCH로 셰이드를 계산합니다.

자주 묻는 질문

Tailwind 공식 색이랑 똑같이 나오나요?

완전히 동일하진 않습니다. Tailwind는 각 색상별로 수동 튜닝된 값을 사용하고, 본 도구는 알고리즘으로 자동 계산합니다. 차이는 작지만 브랜드 색을 정확히 지키면서 전체 팔레트를 빠르게 만들 때 유용합니다.

500이 입력한 베이스랑 정확히 일치하나요?

네, 500단계는 입력한 베이스 컬러를 그대로 사용합니다. 다른 단계들은 OKLCH의 L 값을 조정해 생성합니다.

950 단계가 너무 어두워요.

밝기 보정 슬라이더를 양수로 옮기면 전체 셰이드가 약간 밝아집니다. 또는 950 대신 900을 다크모드 배경으로 사용하세요.

무료인가요?

네, 모든 처리는 브라우저에서 진행되며 회원가입 없이 무제한 사용 가능합니다.