🎨색상 밝기·채도 단계 생성기

베이스 색상으로 Tint·Shade 10단계 팔레트 자동 생성

베이스 색상 (HEX)

보색 자동 생성기

색상 입력 시 보색 팔레트를 즉시 생성

유사색·보색 팔레트 생성기

유사색·보색·삼색 배합 팔레트 생성

색상 밝기·채도 단계 생성기 사용법

베이스 색상(HEX)을 선택하거나 직접 입력하면 Tint 5단계와 Shade 5단계, 총 10가지 팔레트가 자동으로 생성됩니다. Tint는 원래 색에 흰색을 혼합해 밝게 만든 색이고, Shade는 검정을 혼합해 어둡게 만든 색입니다. T20은 흰색 20%, T100은 흰색 100% 혼합을 의미합니다.

각 스워치를 클릭하면 HEX 코드가 클립보드에 즉시 복사됩니다. Tailwind CSS, Material Design, Figma 등 색상 스케일이 필요한 모든 작업에 활용할 수 있습니다. 브랜드 컬러를 입력해 전체 색상 팔레트를 완성해 보세요.

CSS 변수로 활용할 때는 T20·T40·T60을 밝은 배경(hover, disabled), Base를 주요 색상, S20·S40을 어두운 hover 상태에 매핑하면 일관된 색상 체계를 쉽게 구성할 수 있습니다.

자주 묻는 질문

Tint와 Shade의 차이는 무엇인가요?

Tint는 원래 색상에 흰색을 혼합해 밝게 만든 색, Shade는 검정을 혼합해 어둡게 만든 색입니다. T20은 흰색 20% 혼합, S40은 검정 40% 혼합을 의미합니다.

팔레트를 어디에 활용하나요?

UI 버튼·배경·텍스트 색상 체계 구성, CSS 변수 정의, Tailwind 커스텀 색상, Figma 스타일 설정 등에 활용합니다. 브랜드 컬러 1개로 전체 디자인 시스템을 구축할 수 있습니다.

HEX 말고 RGB나 HSL로도 입력할 수 있나요?

현재 HEX(#RRGGBB) 형식만 지원합니다. RGB·HSL 값은 온라인 색상 변환 도구로 HEX로 변환 후 입력해 주세요.

관련된 도구

보색 자동 생성기

유사색·보색 팔레트 생성기

색상 밝기·채도 단계 생성기 사용법

자주 묻는 질문

같은 카테고리 도구