UI 디자인 시스템 구축 시 기본 브랜드 컬러를 기준으로 버튼 호버, 배경 박스, 테두리에 적용할 9단계 명도 셰이드를 즉시 추출하고 색상 코드를 복사합니다.
대표 색상 입력
브랜드 메인 컬러의 HEX 또는 RGB 코드를 입력합니다.
9단계 밝기 칩 선택
호버나 비활성화 상태에 어울리는 밝기 단계를 클릭하여 코드를 확인합니다.
스타일시트 적용
변환된 HSL 또는 HEX 값을 복사하여 UI 스타일에 적용합니다.
입력한 색상의 색조(Hue)와 채도(Saturation)를 유지하면서 명도(Lightness)를 9단계로 자동 계산하여 UI 컴포넌트용 톤온톤 배색을 구성할 수 있습니다.
각 밝기 단계별로 흰색 글자와 검은색 글자를 얹었을 때의 가독성과 명도 대비율을 함께 제공하여 버튼 UI 적용 시 유용합니다.
네, 9단계 밝기 칩 중 원하는 슬롯을 클릭하면 해당 색상 코드가 상단 입력창으로 즉시 로드됩니다.
9단계 고정 프리셋으로 명도 스펙트럼을 제공합니다.