Tailwind 색상 스케일 생성

Tailwind 색상 스케일 생성 도구란?

사용 방법

1. 베이스 컬러를 입력란에 입력하거나(HEX·RGB·HSL·OKLCH 지원) 컬러 피커로 색상을 고릅니다. 아이디어가 필요할 때는 "랜덤" 버튼도 사용할 수 있습니다.
2. 필요에 따라 컬러 이름(예: brand, primary)을 입력합니다. 내보낼 때 변수 이름에 반영됩니다.
3. 생성된 50-950 의 11 단계 스케일을 확인합니다. 입력한 색상과 가장 가까운 단계에는 "베이스" 배지가 붙으며, 그 색상은 그대로 유지됩니다.
4. 표시 포맷(HEX·OKLCH·HSL·RGB)을 전환하고, 각 단계의 값은 복사 버튼으로 복사합니다.
5. "내보내기"에서 Tailwind v4·Tailwind v3·CSS 변수·JSON 탭을 전환하고, "복사" 버튼으로 코드 전체를 복사해 tailwind.config 나 스타일에 붙여넣습니다.
6. "URL 복사"를 누르면 현재 스케일을 재현할 수 있는 공유 URL 이 만들어집니다. 팀 공유나 북마크에 활용할 수 있습니다.

활용 사례

• 브랜드 컬러 하나로 Tailwind 의 50-950 스케일을 만들어 tailwind config 에 그대로 설정하고 싶은 프런트엔드 엔지니어.
• Tailwind CSS v4 로 마이그레이션하면서 @theme 와 OKLCH 로 커스텀 색상을 정의하고 싶은 개발자.
• 디자인 시스템에서 버튼이나 링크 등의 상태(hover·active)에 쓰는 명도가 다른 색상을 체계적으로 갖추고 싶은 디자이너.
• shadcn/ui 같은 컴포넌트에 맞춰 자체 프라이머리 색상의 스케일을 준비하고 싶은 분.
• 기존 색상 하나를 기준으로 연한 배경색(50·100)부터 진한 글자색(900·950)까지 한꺼번에 준비하고 싶은 분.
• 정한 색상 스케일을 공유 URL 로 팀에 전달하거나 나중에 같은 스케일을 다시 재현하고 싶은 분.

주의사항

• 스케일 생성은 모두 브라우저 안에서 이루어지며, 입력한 색상은 외부로 전송되지 않습니다.
• 베이스 컬러는 HEX·RGB·HSL·OKLCH 의 각 형식으로 입력할 수 있습니다. 투명도(알파)는 지원하지 않습니다.
• 입력한 색상의 명도와 가장 가까운 단계를 자동으로 판정하고, 그 단계에는 입력한 색상을 그대로 채택합니다(예: 밝은 색상이면 200, 진한 색상이면 800 등에 베이스가 놓입니다).
• 색상 계산에는 Tailwind CSS v4 와 같은 OKLCH 색 공간을 사용하며, sRGB 색 영역을 벗어나는 색상은 자동으로 영역 안으로 조정합니다. 실제 Tailwind 표준 팔레트와 완전히 일치하지는 않습니다.
• 공유 URL 에는 베이스 컬러·컬러 이름·표시 포맷만 포함됩니다. URL 을 열면 같은 설정으로 스케일이 재현됩니다.

자주 묻는 질문