HEX, RGB, HSL이 각각 뜻하는 것

화면은 빛을 더해서 색을 만든다

화면의 각 점에는 빨강, 초록, 파랑 빛이 들어 있고, 이 셋의 세기를 조절해 색을 만듭니다. 셋 다 최대면 흰색, 셋 다 0이면 검정입니다. 물감을 섞을수록 어두워지는 것과 반대로, 빛은 더할수록 밝아집니다. 그래서 화면용 색은 이 세 가지 빛의 세기로 표현합니다. 빛의 삼원색이 빨강·초록·파랑인 것은 사람 눈의 색을 느끼는 세포가 대략 이 세 영역의 빛에 반응하기 때문입니다.

HEX와 RGB는 같은 말

RGB는 세 빛의 세기를 0에서 255까지의 숫자로 적습니다. HEX는 그 세 숫자를 16진수 두 자리씩 이어 붙인 것입니다. 16진수 두 자리는 0부터 255까지를 정확히 담기 때문에 그렇게 정해졌습니다. 그러니 둘은 완전히 같은 정보이고 적는 방식만 다릅니다. 한 채널이 256단계이므로 세 채널을 조합하면 256의 세제곱, 약 1,677만 가지 색을 적을 수 있습니다.

• #FF0000 = rgb(255, 0, 0) = 빨강
• #000000 = rgb(0, 0, 0) = 검정
• #FFFFFF = rgb(255, 255, 255) = 흰색
• 세 자리 축약형 #F00 은 #FF0000 과 같다

HSL이 편한 이유

HEX나 RGB만 보고 '조금 더 밝게' 만들려면 세 숫자를 각각 얼마나 올릴지 계산해야 합니다. HSL은 색상, 채도, 밝기를 따로 다루므로 밝기 숫자 하나만 바꾸면 됩니다. 같은 색상에서 밝기만 다른 팔레트를 만들 때 특히 편합니다. 결국 같은 색을 가리키지만, 사람이 조절하기에는 HSL 쪽이 직관적입니다. HSL의 색상은 0도에서 360도까지의 각도로 적고, 0도가 빨강, 120도가 초록, 240도가 파랑입니다. 밝기는 50%일 때 가장 순수한 색이고 100%면 흰색, 0%면 검정이 됩니다.

투명도가 붙을 때

색 뒤에 한 값이 더 붙는 경우가 있는데 이것은 투명도입니다. HEX에서는 두 자리가 더 붙어 여덟 자리가 되고, RGB에서는 네 번째 값으로 적습니다. 투명한 색은 뒤에 무엇이 있느냐에 따라 최종적으로 보이는 색이 달라지므로, 대비를 확인할 때는 실제 배경 위에서 봐야 합니다. 투명도를 0에서 1 사이 값으로 적는 방식과 HEX의 00에서 FF로 적는 방식이 섞여 있으니, 0.5가 HEX로는 80쯤이라는 것을 알아 두면 편합니다.

화면과 인쇄는 다르다

인쇄는 잉크를 겹쳐서 빛을 빼는 방식이라 화면과 원리가 반대입니다. 그래서 화면에서 선명하게 보이는 색 중에는 인쇄로 그대로 낼 수 없는 것이 있습니다. 화면용으로 고른 색을 인쇄물에 그대로 쓰면 탁해 보이는 경우가 여기서 나옵니다. 인쇄는 청록·자홍·노랑·검정 네 잉크를 쓰는 CMYK로 색을 지정하고, 화면용 RGB 값을 CMYK로 바꾸는 공식은 하나로 정해져 있지 않습니다. 인쇄소의 장비와 종이에 따라 결과가 달라지므로, 중요한 인쇄물은 실제 시험 인쇄로 확인하는 것이 안전합니다.

같은 숫자인데 다르게 보이는 이유

같은 HEX 값이라도 화면마다 조금씩 다르게 보입니다. 숫자는 '얼마나 세게'만 정할 뿐, 그 세기의 빨강이 어떤 빨강인지는 색 공간이 정합니다. 웹에서는 sRGB라는 색 공간을 기본으로 가정하지만, 최근 기기 중에는 더 넓은 범위의 색을 낼 수 있는 화면이 많습니다. 여기에 화면 밝기, 야간 모드, 주변 조명까지 더해지므로, 정확한 색을 맞춰야 하는 작업은 보정된 모니터에서 확인해야 합니다.

글자색과 배경색의 대비

색을 고를 때 예쁜지보다 먼저 확인할 것이 읽히는지입니다. 웹 접근성 지침(WCAG)은 일반 글자에 4.5 대 1, 큰 글자에 3 대 1 이상의 명도 대비를 권합니다. HSL의 밝기 값이 같아도 노랑은 밝아 보이고 파랑은 어두워 보이므로, 밝기 숫자만으로 대비를 판단하면 안 됩니다. 대비 검사 도구에 두 색을 넣어 비율을 직접 확인하는 것이 확실합니다.

• 일반 본문: 4.5 대 1 이상
• 큰 글자: 3 대 1 이상
• 검정과 흰색의 대비는 21 대 1로 최대
• 색만으로 정보를 구분하지 말고 글자나 모양을 함께 쓴다

상황별로 고르는 표기

어떤 표기를 쓸지는 작업에 따라 고르면 됩니다. 디자인 도구에서 색을 주고받을 때는 짧고 복사하기 쉬운 HEX가 편하고, 코드에서 값을 계산으로 바꿀 때는 숫자가 나뉘어 있는 RGB가 다루기 쉽습니다. 버튼의 기본·눌림·비활성 상태처럼 같은 색의 변형을 여러 개 만들 때는 HSL이 가장 편합니다. 인쇄물은 처음부터 CMYK로 지정하는 것이 안전합니다.