UI 컬러시스템 RGB, HSL, HSB 알아보기

기술이 발전함에 따라 디스플레이를 통해 색상을 보는 일이 많아졌다.
당장 컴퓨터뿐만 아니라 TV를 통해서도 수많은 색상을 접한다. 이를 위해 색상 모델은 RGB, CMYK, HSB(=HSV), HSL 등 굉장히 많이 만들어지게 되었다. 디지털에서 수학적으로 색상을 표현하기 위함이다.
이 중에서 UI 디자인을 할 때 일반적으로 사용하는 모델 위주로 알아보자.

 

---

 

RGB

https://en.wikipedia.org/wiki/HSL_and_HSV

포토샵에서 아트보드를 만들 때 인쇄용은 CMYK, 디지털용은 RGB로 세팅해야 하기 때문에 포토샵 사용자라면 매우 익숙한 색상 모델일 것이다. 익히 아는 것과 같이 R(Red), G(Green), B(Blue)의 혼합이며, 0~255의 값으로 표현한다.
RGB모델은 정사각형의 큐브로 표현될 수있고 각 꼭지점이 가진 컬러의 좌표값으로 측정한다. (0,0,255)
그러나 인간의 눈은 색조, 채도 및 밝기 (HSB)의 세 가지 특성 측면에서 색상을 인식하는 반면, 컴퓨터 모니터는 다양한 양의 RGB 빛을 생성하여 색상을 표시한다. RGB 모델은 사람의 눈으로 보는 모든 색에 대응할 수 없고, 색 공간이 충분히 균일하지 않아 인간의 인지심리학과 직관적으로 일치하지 않는다.

이 것이 디자인 작업 시 RGB보다는 HSB, HSL 모델을 사용하는 키포인트다.
HSL, HSB는 인간이 지각하는 색과 가깝게 색상을 정의하는 가장 기본적인 색상 모델이며 RGB 색상 모델의 대체 표현이다. 그렇기 때문에 디자인 툴에서 이 두 가지 색상 모델이 색채 팔레트의 표준이 된다.
최근 UI 디자인툴(스케치, 피그마, XD)은 HSB를 채택하고 있다.

 

 

 

 

HSB

https://en.wikipedia.org/wiki/HSL_and_HSV

HSB는 1970년대에 개발된 모델로 RGB보다 더 직관적으로 색상을 선택할 수 있다.
Hue, Satuation, Brightness를 조절하여 색을 조절한다. 

Hue : 0에서 360의 색상 값. 빨강은 0, 초록은 120, 파랑은 240에 위치한다. 
위 그림처럼 원기둥의 겉면을 360도로 돌아가는 색상환이다. 그러므로 360은 원점, 곧 0으로 빨간색이 된다.
Satuation : 0~100의 채도 값. 0은 회색, 100은 원색이다. 원기둥의 중앙지점에서 바깥으로 표현된다.
Brigntness : 0~100의 밝기 값. 원기둥의 하단에서 위로 올라가는 것으로 표현된다.

 

HSB Example

대략적으로 HSB 모델에서 나올 수 있는 케이스를 나열해보았다.
B가 100일 때는, S가 100이면 원색이 나오고, S가 50이면 채도가 낮은 색, S가 0이면 흰색이 나온다.
Brightness가 100이기 때문에 오로지 채도에 영향을 받는다. 
B가 0일 때는, S가 100이건 0이건 검은색이 나온다. 불이 꺼져 아무것도 보이지 않는 상황이라고 상상하면 된다.
만약 완전한 회색을 얻고싶다면 S를 0으로 두고 B를 조절하자. 채도가 0이기 때문에 밝기로 명도 조절을 할 수 있다.

 

 

 

 

HSL

https://en.wikipedia.org/wiki/HSL_and_HSV

HSL도 1970 년대에 컴퓨터 그래픽 연구자들이 설계한 모델로, 이미지와 무관한 컬러 정보 구성 요소, 기능 감지 및 분석에 이상적인 컬러모델이다. 
Hue, Satuation, Lightness를 조절하여 색을 조절한다.  (H,S는 HSB와 동일하게 작동한다.)

Hue : 0에서 360의 색상 값. 빨강은 0, 초록은 120, 파랑은 240에 위치한다.
위 그림처럼 겉면을 360도로 돌아가는 색상환이다. 그러므로 360은 원점, 곧 0으로 빨간색이다.
Satuation : 0~100의 채도 값. 0은 회색, 50은 원색이다. 중앙지점에서 바깥으로 표현된다.
Ligntness : 0~100의 밝기 값. 하단에서 위로 올라가는 것으로 표현된다.

 

HSL Example

HSL 모델의 예제도 만들어보았다. Satuation과 Lightness의 작동방식을 한눈에 알 수 있다.
L이 100일 경우는 흰 색, L이 50일 경우는 원색, L이 0일 경우는 검은색으로 나타나는 걸 볼 수 있다.

 

 

 

 

HSB와 HSL의 차이는?

HSL, HSB는 비슷한 듯 보이지만 차이점을 가지고 있다. 키포인트는 Brightness, Lightness이다.
HSB와 HSL에서 검은색을 만들려면 L, B를 0으로 만들면 된다. (=불을 꺼버린다)

하지만 흰색을 만들 때 HSB는 B뿐만 아니라 S도 0으로 만들어줘야 한다.
HSB는 S100, B0은 원색이기 때문이다. S도 0으로 만들어 색을 완전히 빼주어야 한다.

반면 HSL에서는 S에 상관없이 L만 0으로 지정하면 된다. (L 50이 원색이다.)
HSL는 마치 빛에 의한 가산혼합과 비슷하게 작동한다.
채도가 얼마든 빛을 아주 강하게 쐬여 색이 날아가는 것과 같다.

 

 

Figma에서 HSB로 색상 조절하기

피그마에서 HSB 색상 모델을 확인하려면, Fill > Color picker> HSB로 옵션을 바꿔주면 볼 수 있다.
Hue, Satuation, Brightness의 수치를 조절하면 되는데, 이 방식으로 컬러를 선정하는데 수월함을 느낄 수 있었다. 

 

---

 

디자인 툴의 컬러 사용

Photoshop
Photoshop에서 HSB는 색상을 선택하는 데 사용되며 HSL은 이미지의 색상을 변경하는 데 사용된다. 

Ant Design
Ant Design의 디자인 팀은 HSB 색상 모델을 사용하여 디자인하는 것을 선호했으며, 이는 디자이너가 색상을 조정할 때 색상에 대한 명확한 심리적 기대를 쉽게 가질 수 있을 뿐만 아니라 팀 간의 커뮤니케이션을 용이하게 한다. 
Link

Figma
Figma에서는 색상 모델간 전환이 가능하지만, 피그마가 색상을 렌더링 하는 방식에는 영향을 주지 않는다.
(Color profile은 영향을 준다. sRGB가 기본)

 

 

---

 

추천 사이트

Khan Academy
ko.khanacademy.org/partner-content/pixar/color/color-space/e/color-cube

색채 공간에 대한 강의와 퀴즈로 이해를 돕는다. 개인적으로 퀴즈가 큰 도움이 됐다.

 

 

Google Material Color
material.io/design/color/the-color-system.html#tools-for-picking-colors

Material Design

Google에서 사용하는 컬러칩을 확인할 수 있다.
팔레트 생성기에 현재 나의 브랜드 컬러를 넣으면 어떤 식으로 변형해야할 지 가이드를 잡을 수 있다.
+ Google's Accessibility cite

 

 

---

참고자료

uxmisfit.com/2019/05/21/ui-design-in-practice-colors/

https://brunch.co.kr/@blackindigo-red/26

https://brunch.co.kr/@chulhochoiucj0/17

https://help.figma.com/hc/en-us/articles/360043042113-Color-models-in-Figma

https://www.programmersought.com/article/51822376187/

https://www.pcmag.com/encyclopedia/term/hsb

http://www.tcpschool.com/css/css3_module_colors#:~:text=HSL%20%EC%83%89%EC%83%81%EA%B0%92%EC%9C%BC%EB%A1%9C%20%ED%91%9C%ED%98%84,(Lightness)%EB%A5%BC%20%EC%9D%98%EB%AF%B8%ED%95%A9%EB%8B%88%EB%8B%A4.