색상 코드 변환기 (HEX, RGB, HSL)

기능 소개

색상 코드 변환기는 흔히 쓰는 CSS 표기법 중 어느 것으로 색상을 입력하든 HEX, RGB, HSL, HSV, CMYK의 나머지 표기를 한 번에 보여줍니다. 미리보기 색상 견본, 정확히 일치하는 경우의 CSS 색상 이름, 그리고 가독성을 확인할 수 있도록 흰색·검은색 대비율도 함께 표시합니다.

사용 방법

1. 색상 입력란에 색상을 입력하거나 붙여넣습니다. 옆에 있는 색상 선택기를 사용해도 됩니다.
2. 입력하는 동안 모든 표기법이 갱신됩니다. 필요한 항목 옆의 복사를 클릭합니다.
3. 스타일 가이드에서 HEX를 대문자로 쓴다면 HEX 대문자를 켭니다.
4. 텍스트에 색상을 쓰기 전에 대비 항목을 확인합니다. 초록색 배지는 WCAG AA를 통과했다는 뜻입니다.

예시

#1e90ff는 CSS 색상 dodgerblue입니다. 변환 결과는 다음과 같습니다.

• RGB: rgb(30, 144, 255)
• HSL: hsl(210, 100%, 55.9%)
• HSV: hsv(210, 88.2%, 100%)
• CMYK: cmyk(88%, 44%, 0%, 0%)

흰색 배경 대비율은 3.24:1로, 큰 제목에는 충분하지만 본문 텍스트에는 부족합니다.

색상 모델 간단 정리

• HEX와 RGB는 화면이 내보내는 빨강, 초록, 파랑 빛의 양을 나타냅니다. 브라우저와 디자인 도구가 내부적으로 사용하는 방식입니다.
• HSL은 색상(색상환의 각도), 채도, 명도로 색을 표현하므로 같은 색의 더 밝거나 어두운 톤을 만들기 쉽습니다.
• HSV(HSB라고도 함)는 디자인 소프트웨어 대부분의 색상 선택기에서 사용합니다.
• CMYK는 인쇄용 시안, 마젠타, 노랑, 검정 잉크를 나타냅니다.

#1e90ff80이나 rgb(30 144 255 / 50%)처럼 투명도가 있는 색상은 HEX, RGB, HSL에서 알파 채널과 함께 표시됩니다.