HEX, RGB, HSL 색상 코드

한 색을 쓰는 세 가지 방법

셋 다 같은 파란색입니다. 화면은 모든 색을 빨강, 초록, 파랑 빛을 섞어 만들며, 각 형식은 그 양을 다르게 적을 뿐입니다.

RGB와 HEX

RGB는 빨강, 초록, 파랑을 각각 0~255로 나타냅니다. HEX는 같은 세 숫자를 16진수로 두 자리씩 적은 것으로, 25는 37, 63은 99, D9는 217입니다. #FFF 같은 짧은 코드는 각 자리를 두 번씩 쓴 것(#FFFFFF, 흰색)이고, 네 번째 쌍을 붙이면 투명도를 나타냅니다(#2563D980은 약 반투명).

HSL

HSL은 사람이 색을 떠올리는 방식에 가깝습니다. 색상은 색상환 위의 각도(0 빨강, 120 초록, 240 파랑), 채도는 색의 선명함, 명도는 0%의 검정부터 100%의 흰색까지입니다. 색상과 채도는 그대로 두고 명도만 바꾸면 밝거나 어두운 색을 쉽게 만들 수 있습니다.

CMYK는 인쇄용

프린터는 빛이 아니라 시안, 마젠타, 노랑, 검정 잉크를 섞습니다. 화면과 잉크가 표현할 수 있는 색 범위가 똑같지 않아 RGB와 CMYK 변환은 근삿값입니다.

글자의 대비

웹 접근성 지침 WCAG의 AA 등급은 일반 글자에 4.5:1 이상, 큰 글자에 3:1 이상의 대비를 요구합니다. 색상 코드 변환기로 이 형식들을 서로 바꾸고 흰 글자·검은 글자와의 대비도 확인할 수 있습니다. 사진이나 스크린숏에서 색 코드를 알아내려면 이미지 색 추출을 쓰세요.