브랜드 메인 컬러를 입력하면 50~900 11단계로 자동 확장된 tailwind.config.js 코드를 즉시 생성합니다.
🎨 미리보기
📋 tailwind.config.js

Tailwind 컬러 Config 사용법

  1. 브랜드 메인 컬러를 1~5개 입력합니다 (예: primary, secondary, accent).
  2. 각 컬러가 자동으로 50·100·200·...·900 11단계로 확장됩니다.
  3. 미리보기에서 단계별 색상을 확인합니다.
  4. tailwind.config.js 또는 CSS Variables 형식으로 복사합니다.
  5. 본인 프로젝트의 tailwind.config.js 또는 글로벌 CSS에 붙여넣습니다.

주요 기능

  • 1~5개 컬러 동시 확장
  • HSL 명도 기반 자동 11단계 생성 (Tailwind 공식 알고리즘 근사)
  • Tailwind v3 theme.extend.colors 형식 그대로 출력
  • CSS Variables(--color-primary-500) 형식 동시 지원
  • 완전 무료, 로컬 처리

활용 예시

  • 새 프로젝트 시작 — Tailwind 기본 색상 외 브랜드 컬러 추가
  • 리브랜딩 — 메인 색만 바꿔 전체 단계 일괄 업데이트
  • 다크모드 대응 — 같은 색의 200/700 단계로 라이트/다크 자동 매핑
  • 디자인 시스템 문서화 — 토큰 표 자동 생성
  • Figma 컬러 스타일 동기화 — 같은 단계로 디자인-개발 통일

Tailwind 컬러 시스템 이해하기

Tailwind는 각 색상을 50(가장 밝음) ~ 900(가장 어두움)까지 11단계로 제공해 일관된 디자인 시스템을 구축합니다. 500이 대표적인 기본 색, 700은 hover/active 상태, 50·100은 배경이나 칩에 사용됩니다. 본 도구는 입력한 메인 색을 HSL의 명도(Lightness)만 조정해 단계를 만들어 Tailwind 공식 팔레트와 유사한 자연스러운 그라데이션을 만듭니다.

자주 묻는 질문

Tailwind 공식 컬러와 정확히 일치하나요?

아니요. 공식은 각 색상마다 디자이너가 미세 조정한 값이지만, 본 도구는 HSL 명도 기반 자동 생성입니다. 실무에서 무리 없이 사용 가능한 수준의 근사이며, 필요하면 단계별로 미세 수정 가능합니다.

다크모드는 어떻게 적용하나요?

같은 컬러의 200~300단계를 다크모드의 메인으로, 800~900단계를 배경으로 사용하는 패턴이 일반적입니다. Tailwind의 dark: 변형으로 토글하세요.

CSS Variables 출력도 같이 되나요?

네, CSS Variables 복사 버튼으로 :root { --color-primary-500: #...; } 형식의 코드를 별도 생성할 수 있습니다. Tailwind 외 일반 CSS 프로젝트에 활용 가능합니다.

입력한 컬러 값이 서버에 저장되나요?

아니요. 모든 변환은 브라우저에서만 이루어집니다.