디자인·Canvas
Tailwind Palette Tailwind 팔레트 생성기
베이스 색상 하나(HEX)를 입력하면 Tailwind용 11단계 팔레트(50~950)를 자동으로 생성합니다. OKLCH 명도 스케일을 사용해 밝은 50부터 어두운 950까지 고르게 펼치고, 입력한 색은 가장 가까운 단계에 그대로 고정됩니다. 각 색을 클릭해 HEX를 복사하거나 Tailwind v4 @theme · v3 config · CSS 변수로 한 번에 복사하세요.
1베이스 색상(HEX) 입력211단계 팔레트 자동 생성3스와치 클릭 또는 코드 복사
베이스 색상
색상 이름
팔레트 (50–950)
코드
@theme {
--color-brand-50: #F1F6FF;
--color-brand-100: #DFEAFF;
--color-brand-200: #C6DAFF;
--color-brand-300: #A0C0FF;
--color-brand-400: #6D9CFF;
--color-brand-500: #4B83FF;
--color-brand-600: #3A70EB;
--color-brand-700: #2659D2;
--color-brand-800: #1545BD;
--color-brand-900: #0735AD;
--color-brand-950: #001667;
}이 도구에 대하여
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
Tailwind 팔레트 생성기는 베이스 색상 하나로 Tailwind CSS용 11단계 색상 팔레트(50~950)를 만들어주는 도구입니다.
Tailwind CSS로 작업하는 프론트엔드 개발자와, 디자인 토큰·컬러 스케일을 정의해야 하는 디자이너를 위한 도구입니다.
베이스 HEX를 입력하면 OKLCH 명도 스케일을 따라 50부터 950까지 색이 생성되고, 결과를 스와치 클릭으로 복사하거나 Tailwind config·@theme·CSS 변수 코드로 복사합니다.
색상 단계를 손으로 맞출 필요 없이 일관된 명암 스케일을 즉시 얻을 수 있어, 디자인 시스템과 테마 토큰 작업이 빨라집니다.