색상 밝기·채도 단계 생성기 사용법
베이스 색상(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로 변환 후 입력해 주세요.