베이스 색상 하나(HEX)를 입력하면 Tailwind용 11단계 팔레트(50~950)를 자동으로 생성합니다. OKLCH 명도 스케일을 사용해 밝은 50부터 어두운 950까지 고르게 펼치고, 입력한 색은 가장 가까운 단계에 그대로 고정됩니다. 각 색을 클릭해 HEX를 복사하거나 Tailwind v4 @theme · v3 config · CSS 변수로 한 번에 복사하세요.
@theme {
--color-brand-50: #F4F8FF;
--color-brand-100: #E5EDFD;
--color-brand-200: #C2D5FC;
--color-brand-300: #9ABAF9;
--color-brand-400: #6F9CF7;
--color-brand-500: #3A70EB;
--color-brand-600: #1A55EA;
--color-brand-700: #1140B4;
--color-brand-800: #092B81;
--color-brand-900: #031851;
--color-brand-950: #020F38;
}Tailwind로 UI를 만들면 색 하나로는 부족합니다. 버튼 기본 상태에 600, 호버에 700, 눌린 상태에 800, 배경 강조에 50이나 100, 테두리에 200: 이런 식으로 같은 계열 안에서 최소 대여섯 단계가 필요합니다. 그런데 디자인 가이드에서 받는 건 대개 브랜드 컬러 HEX 하나뿐입니다.
손으로 만들려면 HSL의 명도만 균등하게 조정하는 방식을 쓰기 쉬운데, 이렇게 하면 노랑 계열은 중간 단계가 탁해지고 파랑 계열은 어두운 쪽이 뭉개집니다. 사람 눈이 색상마다 밝기를 다르게 느끼기 때문입니다.
이 생성기는 입력한 HEX를 OKLCH 색공간으로 변환한 뒤 단계를 만듭니다. OKLCH는 밝기(L)가 사람이 실제로 느끼는 밝기와 거의 일치하도록 설계된 색공간이라, 같은 L 값이면 노랑이든 파랑이든 비슷한 밝기로 보입니다. 덕분에 색상 계열이 달라도 500은 500끼리, 700은 700끼리 대비가 비슷하게 맞습니다.
먼저 입력한 색의 밝기를 보고 11단계 중 어디에 해당하는지 찾아 그 자리에 고정합니다. 브랜드 컬러가 팔레트 어딘가에 원본 그대로 남아야 하기 때문입니다. 그다음 나머지 단계의 밝기와 채도를 채우되, 색역을 벗어나는 조합은 표현 가능한 범위 안으로 당겨 넣습니다.
Tailwind v4는 CSS의 @theme 블록에 --color-{이름}-{단계} 형태로 토큰을 선언합니다. v3라면 tailwind.config.js의 theme.extend.colors에 객체로 넣습니다. 두 형식 모두 복사할 수 있으므로 프로젝트 버전에 맞는 쪽을 고르면 됩니다.
팔레트를 넣은 뒤에는 실제 조합으로 대비를 확인하세요. 본문 텍스트는 배경 대비 4.5:1, 큰 텍스트와 UI 요소는 3:1이 WCAG AA 기준입니다. 경험적으로 흰 배경에는 600 이상, 어두운 배경에는 300 이하가 안전한 출발점이지만, 노랑·연두 계열은 이보다 더 어두운 단계가 필요합니다.
생성 후 자기 브랜드 컬러가 팔레트 안에 그대로 있는지 확인하세요. 있어야 기존 디자인 자산과 색이 어긋나지 않습니다.
밝은 색을 넣으면 어두운 단계가 전부 새로 생성됩니다. 이 구간이 실제 텍스트·버튼에 쓰이므로 대비를 반드시 확인하세요.
globals.css의 @theme 블록에 붙여 넣으면 bg-brand-600, text-brand-900 같은 클래스가 바로 동작합니다.
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
Tailwind 팔레트 생성기는 베이스 색상 하나로 Tailwind CSS용 11단계 색상 팔레트(50~950)를 만들어주는 도구입니다.
Tailwind CSS로 작업하는 프론트엔드 개발자와, 디자인 토큰·컬러 스케일을 정의해야 하는 디자이너를 위한 도구입니다.
베이스 HEX를 입력하면 OKLCH 명도 스케일을 따라 50부터 950까지 색이 생성되고, 결과를 스와치 클릭으로 복사하거나 Tailwind config·@theme·CSS 변수 코드로 복사합니다.
색상 단계를 손으로 맞출 필요 없이 일관된 명암 스케일을 즉시 얻을 수 있어, 디자인 시스템과 테마 토큰 작업이 빨라집니다.