색상 변환기
HEX 색상을 RGB·HSL 등 화면에서 쓰기 쉬운 표현으로 변환하고 대비가 좋은 on-color도 제안합니다.
사용 방법
- HEX 색상을 입력하거나 지원 브라우저에서 eyedropper로 고른 뒤 변환값과 sample을 확인합니다.
핵심 기능과 처리 범위
입력 HEX를 정규화한 뒤 내부 color conversion 함수로 여러 표현을 계산하고 실제 UI sample과 CSS custom property 예시를 함께 보여줍니다.
처리 원리
normalizeHex→hexToRgb→rgbToHsl 계열 계산과 readableTextColor 판정을 사용합니다.
예시
#176B5B를 넣으면 해당 RGB/HSL 값과 --brand, --on-brand CSS 예시가 표시됩니다.
이럴 때 유용합니다
- 디자인 token에 넣을 한 색상의 여러 표현을 빠르게 확인할 때
사용 전 참고
- 현재 입력 기준은 유효한 HEX이며 wide-gamut 색공간·ICC profile 변환은 하지 않습니다.
자주 묻는 질문
알파 채널도 변환하나요?
현재 기본 color 입력은 6자리 HEX 중심이며 alpha color conversion을 별도 입력하지 않습니다.