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

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

화면의 각 점에는 빨강, 초록, 파랑 빛이 들어 있고, 이 셋의 세기를 조절해 색을 만듭니다. 셋 다 최대면 흰색, 셋 다 0이면 검정입니다. 물감을 섞을수록 어두워지는 것과 반대로, 빛은 더할수록 밝아집니다. 그래서 화면용 색은 이 세 가지 빛의 세기로 표현합니다.

HEX와 RGB는 같은 말

RGB는 세 빛의 세기를 0에서 255까지의 숫자로 적습니다. HEX는 그 세 숫자를 16진수 두 자리씩 이어 붙인 것입니다. 16진수 두 자리는 0부터 255까지를 정확히 담기 때문에 그렇게 정해졌습니다. 그러니 둘은 완전히 같은 정보이고 적는 방식만 다릅니다.

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

HSL이 편한 이유

HEX나 RGB만 보고 '조금 더 밝게' 만들려면 세 숫자를 각각 얼마나 올릴지 계산해야 합니다. HSL은 색상, 채도, 밝기를 따로 다루므로 밝기 숫자 하나만 바꾸면 됩니다. 같은 색상에서 밝기만 다른 팔레트를 만들 때 특히 편합니다. 결국 같은 색을 가리키지만, 사람이 조절하기에는 HSL 쪽이 직관적입니다.

투명도가 붙을 때

색 뒤에 한 값이 더 붙는 경우가 있는데 이것은 투명도입니다. HEX에서는 두 자리가 더 붙어 여덟 자리가 되고, RGB에서는 네 번째 값으로 적습니다. 투명한 색은 뒤에 무엇이 있느냐에 따라 최종적으로 보이는 색이 달라지므로, 대비를 확인할 때는 실제 배경 위에서 봐야 합니다.

화면과 인쇄는 다르다

인쇄는 잉크를 겹쳐서 빛을 빼는 방식이라 화면과 원리가 반대입니다. 그래서 화면에서 선명하게 보이는 색 중에는 인쇄로 그대로 낼 수 없는 것이 있습니다. 화면용으로 고른 색을 인쇄물에 그대로 쓰면 탁해 보이는 경우가 여기서 나옵니다.