Tailwind CSS 컬러 팔레트 생성기

Tailwind CSS 컬러 시스템 가이드

알고리즘 기반 HSL 음영 스케일링과 디자인 시스템 컬러 설계

웹 애플리케이션의 디자인 시스템을 구축할 때 일관성 있는 디자인 톤앤매너를 유지하기 위해서는 브랜드 대표 색상에 기반한 단계별 컬러 팔레트(50~950 음영)가 필수적입니다. Tailwind CSS는 50(가장 밝은 배경색)부터 950(가장 어두운 텍스트/테두리색)까지 세밀한 명도 단계를 통해 완성도 높은 UI 커스텀을 지원합니다.

ToolsYouWant의 Tailwind CSS 컬러 팔레트 생성기는 사용자가 입력한 대표 HEX 색상을 HSL(Hue, Saturation, Lightness) 색상 공간으로 변환한 뒤, 자체 정밀 보정 알고리즘을 통해 명도와 채도를 선형 스케일링하여 가장 자연스러운 11단계 디자인 시스템 팔레트를 추출합니다.

50~950 11단계 음영 자동 추출

HEX 코드 입력 즉시 Tailwind 표준 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 스케일을 완벽하게 연산합니다.

실시간 컴포넌트 비주얼 프리뷰

버튼, 배지, 알림창 등 실제 웹 UI 요소에 생성된 색상이 어떻게 적용되는지 실시간으로 사전 검증할 수 있습니다.

1초 복사 (tailwind.config.js & CSS)

Tailwind 설정 파일용 JSON 형태 객체 및 웹 표준 CSS Custom Property 변수를 단 한 번의 클릭으로 원터치 복사합니다.

1. HSL 알고리즘을 이용한 명도 스케일링 원리

RGB 및 HEX 색상 포맷은 빨강(R), 초록(G), 파랑(B)의 광원 조합 수치이므로 인간의 눈으로 체감하는 밝기(명도)를 직관적으로 조절하기 어렵습니다.

반면 HSL 색상 모델은 색상(Hue, 0~360°), 채널 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 구성되어 있어, 색조를 유지한 채 밝기만 선형적으로 증감시키는 데 최적화되어 있습니다.

본 도구는 입력된 500번 기준 색상의 명도를 중심으로 50~400 단계에서는 명도를 95%까지 서서히 올려 가벼운 배경 색상을 만들고, 600~950 단계에서는 명도를 점진적으로 낮추어 높은 대비(Contrast)의 어두운 음영을 보정 생성합니다.

Tailwind CSS 표준 음영 단계별 추천 UI 용도 가이드

각 음영 단계가 실제 웹 UI 디자인 시스템에서 어떻게 활용되는지에 대한 가이드입니다.

음영 단계 (Shade)	권장 명도 범위	추천 UI 디자인 요소 용도

2. tailwind.config.js 프로젝트 파일 적용 방법

생성된 팔레트를 프로젝트에 적용하는 방법은 매우 간단합니다. 하단의 [Copy Config] 버튼을 클릭하면 생성된 50~950 JSON 객체가 클립보드에 복사됩니다.

프로젝트의 tailwind.config.js 파일로 이동한 뒤 theme.extend.colors 항목에 해당 객체를 추가해 주세요.

이제 HTML/JSX 코드 상에서 bg-brand-500, text-brand-700, border-brand-200 등 Tailwind CSS의 표준 유틸리티 클래스로 유연하게 사용할 수 있습니다.

자주 묻는 질문 (FAQ)

Q.500번 색상에 내가 입력한 HEX 코드가 정확히 반영되나요?

네, 정확히 반영됩니다. 입력하신 기준 HEX 색상은 500번 스케일에 그대로 매핑되며, 이를 중심으로 50~400과 600~950 수치가 자연스럽게 알고리즘 보정 생성됩니다.

Q.Tailwind CSS v3과 v4 모두에서 사용할 수 있나요?

네, 모두 사용할 수 있습니다. 복사되는 JSON 객체는 Tailwind CSS v3의 tailwind.config.js는 물론, [Copy CSS Variables] 기능을 이용해 v4의 main.css @theme 블록 및 표준 CSS 변수(--color-brand-500)로도 자유롭게 사용 가능합니다.

Q.입력한 브랜드 컬러 정보가 서버에 기록되나요?

기록되지 않습니다. 본 도구는 브라우저 자바스크립트 HSL 수식 연산으로 구동되므로 데이터가 외부에 전송되지 않습니다.

실시간 UI 비주얼 프리뷰 (Live Component Preview)

생성된 팔레트 (Generated Palette)

클라이언트 사이드 처리

Tailwind Config 활용 팁