화면 속 색상을 만드는 세 가지 방식
화면에 색상을 표현하는 방법은 코드로 구현할 때 여러 가지로 나뉩니다. 그중에서도 HEX, RGBA, HSLA는 가장 널리 사용되는 세 가지 색상 코드 체계입니다.
HEX 코드와 RGB는 이미 접해본 경험이 있을 것입니다. 하지만 HSL은 사람이 읽기 쉽게 설계되었음에도 아직 생소하게 느껴질 수 있습니다. 색상을 표기하는 각 방식은 저마다 다른 상황에서 유용하며, 기본적인 이해만 있으면 상황에 맞는 현명한 선택을 할 수 있습니다. 지금부터 RGB, HEX, HSL의 차이점을 하나씩 살펴보겠습니다.
RGB(Red, Green, Blue)란 무엇인가?
RGB 값부터 시작하는 것이 자연스럽습니다. 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 색상이 바로 화면이 거의 모든 색을 만들어내는 기본 요소이기 때문입니다. 화면은 '가산 혼합(additive color mixing)'이라는 원리로 색을 표현하지만, RGB를 이해하는 데 과학적 배경 지식까지는 필요하지 않습니다.
rgb(255, 0, 0)은 R값이 최대치이므로 빨간색입니다. G나 B를 255로 설정하면 순수한 초록색 또는 파란색이 됩니다. 세 값을 모두 255로 설정하면 흰색(모든 색의 합)이 되고, 모두 0으로 만들면 검정색이 됩니다. 네 번째 값(알파 채널, 0~1 사이)을 추가하면 투명도도 조절할 수 있습니다. 예를 들어 rgba(0, 0, 0, .5)는 반투명한 검정색을 의미합니다.
규칙은 단순하지만 실제로는 그리 직관적이지 않습니다. 색조를 조금만 변경해도 RGB 균형값이 크게 달라지기 때문에, 사람이 별도의 RGB 생성 도구 없이 수동으로 조정하기가 매우 어렵습니다. 다행히도 이런 도구는 무료로 많이 제공되고 있습니다.
HEX(16진수) 색상 코드란 무엇인가?
HEX 코드는 RGB 값을 다르게 표기한 것에 불과합니다. 예를 들어 #6a79f7(코른플라워 블루)는 rgb(106, 121, 247)과 정확히 일치합니다. 6a가 빨강, 79가 초록, f7이 파랑을 나타냅니다.
먼저 알아야 할 점은 16진수 색상 체계에서 'a~f' 문자가 10부터 15까지의 숫자를 대표한다는 것입니다. 두 번째로, 이름 그대로 16진법(hexadecimal)을 사용한다는 점입니다. 10진법에서 21은 2 × 10 + 1이지만, 16진법에서는 2 × 16 + 1이 됩니다. 즉, 첫 번째 자릿수에 16을 곱하고 두 번째 자릿수를 더하면 됩니다. 6a = 6 × 16 + 10 = 106, 79 = 7 × 16 + 9 = 121처럼요!
이런 계산은 재미있긴 하지만, HEX 코드가 사람에게 RGB보다 더 불편하다는 사실은 분명합니다. 다만 복사해서 붙여넣기 쉽고, 기억하기 좋은 문자·숫자 조합도 가능하다는 장점이 있습니다.
HEX 코드에도 투명도를 추가할 수 있습니다. 255의 일부 비율에 해당하는 값을 맨 앞에 붙이면 되는데, 예를 들어 #806a79f7처럼 작성합니다. 16진수 80은 10진수 126으로, 최댓값 255의 약 50%에 해당합니다.
HSL(Hue, Saturation, Lightness)란 무엇인가?
HSL은 처음부터 사람이 읽기 쉽도록 설계된 색상 모델로, 특히 RGB의 대안으로 인기를 얻고 있습니다. 작동 방식은 다음과 같습니다.
Hue(색조)는 색상 자체를 의미하며, 색상환(color wheel)의 각도로 어떤 색인지 나타냅니다. 색상환과 주요 색의 위치를 알고 있다면, 45도가 주황색이고 270도가 보라색임을 잠깐 생각만으로 알 수 있습니다.
- 0 = 빨강
- 60 = 노랑
- 120 = 초록
- 180 = 청록(cyan)
- 240 = 파랑
- 300 = 마젠타
Saturation(채도)은 색이 얼마나 선명한지를 나타냅니다. 채도 0%면 회색톤이 되고, 100%면 가장 진한 원래 색상이 표현됩니다. 색을 부드럽게 누그러뜨리거나 더 돋보이게 하고 싶다면 이 값만 조절하면 됩니다.
Lightness(명도)는 색의 밝고 어두운 정도를 말합니다. 명도 0%면 색조와 채도 설정과 관계없이 검정색이 되고, 100%면 흰색이 됩니다. 짐작했듯이 50%일 때 가장 정확한 원래 색상을 얻을 수 있습니다.
이 정보만 있으면 hsl(0, 100%, 50%)이 무슨 뜻인지 즉시 알 수 있습니다. 바로 빨간색입니다! 더 어둡고 깊은 빨간색을 원한다면 hsl(0, 70%, 40%)을 시도해 보세요. 같은 조건에서 파란색이 필요하다면? 0을 240으로 바꾸기만 하면 됩니다. 투명도도 RGB와 마찬가지 방식으로, 네 번째 값(0~1 사이)을 추가하면 됩니다. 예를 들어 hsla(240, 70%, 40%, .5)처럼 작성합니다.
HSV/HSB와 HSI
뭐라고요? 색상 모델이 더 있다고요? 걱정할 필요 없습니다. 컴퓨터로 색을 다루는 대부분의 사람들에게는 HEX, RGB, HSL이면 충분합니다. 이 세 가지가 압도적으로 널리 쓰이는 색상 표기법이기 때문입니다. 다만 그래픽 디자인이나 이미지 머신러닝처럼 이미지와 색을 집중적으로 다루는 분야에서는 이보다 더 전문적인 색상 모델을 사용하는 사람들을 만날 수도 있습니다.
HSB는 'Hue Saturation Brightness(색조·채도·밝기)'의 약자이고, HSV는 'Hue Saturation Value(색조·채도·명도)'의 약자입니다. 사실 두 용어는 동일한 모델을 가리키는 다른 이름일 뿐이며, HSL과의 가장 큰 차이는 채도(saturation)를 정의하는 방식에 있습니다. HSI(Hue Saturation Intensity)는 HSB/HSV와 몇 가지 세부적인 차이가 있지만 널리 쓰이지 않아 실무에서 마주칠 일은 거의 없습니다.
어떤 색상 모델을 사용해야 할까?
일반적으로 색상 모델 선택은 크지 않은 디자인 결정이지만, 좋은 결과물은 수많은 작은 결정들이 모여 완성됩니다. 핵심만 요약하면 다음과 같습니다.
- HEX: 복사·붙여넣기가 편리하여 사람이 직접 다룰 일이 적은 경우에 적합합니다.
- RGB/RGBA: 가독성이 준수하며, 사람이 때때로 투명도를 조절할 가능성이 있는 경우에 유용합니다.
- HSL/HSLA: 사람이 색상을 직접 수정해야 하는 상황이라면 최선의 선택입니다.
그 외에는 대체로 개인 취향의 영역입니다. 물론 HSL 진영 사람들이 더 똑똑하고 잘생겼다는 소문이 있긴 합니다.