Color Palette Tool

도구는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950의 11가지 음영 수준을 사용합니다. 이는 Tailwind CSS 색상 팔레트 명명 규칙과 일치합니다. 명도 값은 95%(음영 50, 거의 흰색)에서 8%(음영 950, 거의 검은색)까지 범위를 가집니다.

기본 16진수 색상이 HSL 형식으로 변환됩니다. 색조(H)와 채도(S) 값은 일정하게 유지되고, 명도(L)는 각 음영 수준에 대한 고정 값으로 교체됩니다: 50은 95%, 100은 90%, 200은 82%, 300은 72%, 400은 60%, 500은 48%, 600은 38%, 700은 28%, 800은 20%, 900은 12%, 950은 8%.

네. "전체 복사"를 클릭하면 전체 팔레트가 "50: '#hex', 100: '#hex', ..." 형식의 쉼표로 구분된 목록으로 복사됩니다. 이를 tailwind.config.js 또는 tailwind.config.ts 파일의 named color 항목 내 colors 섹션에 직접 붙여넣을 수 있습니다.

11가지 음영 모두가 동일한 색상 계열(색상환에서 동일한 색조 각도)과 동일한 색상 강도(동일한 채도 비율)를 공유한다는 의미입니다. 음영마다 밝기만 변합니다. 이는 팔레트가 조화롭게 보이도록 합니다 — 밝은 음영은 파스텔톤이고 어두운 음영은 깊지만, 모두 분명히 동일한 색상에 속합니다.

도구는 음영 500을 48%의 고정 명도로 매핑하는데, 이는 입력 색상의 자연스러운 명도와 약간 다를 수 있습니다. 이는 의도적입니다 — 스케일은 11개 레벨 전체에서 시각적으로 일관성 있도록 설계되어 있어 입력의 정확한 명도가 스케일에 맞게 정규화됩니다. 원본 색상의 색조와 채도는 항상 유지됩니다.

"전체 복사" 버튼은 "50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', ..." 형식의 출력을 생성합니다 — 16진수 값 주위에 작은따옴표를 사용하는 키-값 쌍의 쉼표로 구분된 시리즈입니다. 이 형식은 Tailwind CSS 설정 객체 구문과 직접 호환됩니다.

현재 도구는 16진수 색상 입력만 허용합니다(예: #3b82f6 또는 3b82f6). RGB 및 HSL 입력은 직접 지원되지 않지만, 색상 변환기를 사용하여 색상을 16진수로 변환한 후 이 도구에 붙여넣을 수 있습니다.

네, 회원가입, 인터페이스를 방해하는 광고, 사용 제한 없이 완전히 무료입니다. 모든 색상 계산은 브라우저에서 로컬로 실행됩니다.