색상에 대한 글
개요
지난 글에서는 빛의 3원색 RGB와 색의 3원색 CMYK, 그리고 수로 된 RGB값으로 어떻게 색상을 표현하는지를 이야기했습니다.
디지털 색상과 수
RGB와 CMYK, 가산혼합과 감산혼합 일반적으로 색은 빛의 3원색인 RGB, 색의 3원색인 CMYK로 구분하고는 합니다. RGB는 모니터와 같은 디스플레이를 통해 표현되는 디지털 작업에서, CMYK는 지면으로 표
do-workspace.tistory.com
다만 R, G, B 각각의 값을 조절해서 원하는 색을 찾는 것은 매우 불편하고 사람에게 직관적이지도 않기 때문에, 우리는 주로 색조, 채도, 명도 로 색을 나타내는 HSB모델을 통해서 색상을 선택합니다. 주로 포토샵과 같은 그래픽 프로그램의 컬러 피커가 이러한 HSB모델을 사용하고 있습니다.
이번 글에서는 HSB모델의 변수이자 우리에게 친숙한 색의 구성요소인 색상 (Hue), 채도 (Saturation, Chroma), 명도 (Brightness, Value, Lightness) 에 대해 간단하게 다뤄보겠습니다.
아래의 두 GIF 이미지를 통해 HSB모델을 통한 색상 선택이 RGB모델로 색상을 선택하는 것보다 비교할 수 없을 정도로 편리하다는 것을 간접적으로 느낄 수 있습니다.
HSB모델과 색체계
색체계는 사람이 색에 대해서 분석해온 기원전부터 존재했습니다. 아리스토텔레스는 4원소 (물, 불, 공기, 흙) 가 색깔의 근원이 된다고 주장했으며, 이러한 유채색들은 빛(흰색)과 어둠(검은색) 사이에 존재한다고 생각했습니다. 이후 뉴턴이 프리즘으로 빛의 스펙트럼을 관찰하는 등 시간이 지나며 색체계는 점점 더 다양한 스펙트럼을 가지게 되었고, 현대에 이르러서 색체계의 목적은 색을 표현하는 공통 언어를 만드는 것이 되었습니다.
그 중 가장 대중적인 것이 앞서 이야기했던 앨버트 먼셀이 만든 색체계인 HSB모델입니다. 먼셀 색체계는 3가지의 독립변수인 색상, 명도, 채도를 수치화해 색을 설명합니다. 색상은 색상환에서의 각도, 채도는 원의 중심으로부터의 거리, 명도는 수직축에서의 높이로 표현됩니다.
색상 (Hue)
색상은 색의 스펙트럼을 나타낸 것입니다. 색의 스펙트럼을 원형으로 표현한 색상환 상의 각도가 달라지면, 색조가 바뀌는 것을 확인할 수 있습니다.
먼셀 색체계에서 색상환은 빨강, 노랑, 초록, 파랑, 보라의 다섯가지 기본 색으로 이루어져 있으며 이들이 혼합된 2차색이 그 사이에 위치합니다.
먼셀의 색상환 외에도 기본 색상이나 색상환상의 위치를 다르게 설정한 여러 가지의 색상환들이 존재합니다. (오스트왈드의 색상환, 초기의 RYB 색상환 등)
채도 (Saturation, Chroma)
채도는 색상의 순수한 정도를 나타내는 수치입니다.
채도가 높을수록 색상은 선명해지고, 낮을수록 탁해집니다. 채도가 높은 색은 눈에 잘 띄며, 눈의 피로도를 높이기도 합니다.
명도 (Brightness, Lightness, Value)
명도는 색의 상대적인 밝음과 어두움의 정도를 나타내는 수치입니다.
HSB (또는 HSV) 와 HSL 모델에서의 명도는 약간 다르게 표현되기는 하지만, 관련해서는 다음 단락에서 이야기하겠습니다.
HSB 모델과 HSL 모델
HSB(HSV) 모델은 원기둥 형태로 표현되고, HSL 모델은 위 아래로 원뿔이 있는 형태로 표현됩니다.
두 모델의 차이는 HSB에선 B가 최대치더라도 채도를 0으로 낮춰야 (원의 중심으로 이동해야) 하얀색이 되는 반면, HSL에서는 L이 최대치가 될 수록 색상은 하얀색에 수렴한다는 것입니다.
HSB 모델과 HSL 모델에 대한 더 자세한 설명은 아래 링크의 글 · 영상을 추천드립니다.
UI 컬러시스템 RGB, HSL, HSB 알아보기
기술이 발전함에 따라 디스플레이를 통해 색상을 보는 일이 많아졌다. 당장 컴퓨터뿐만 아니라 TV를 통해서도 수많은 색상을 접한다. 이를 위해 색상 모델은 RGB, CMYK, HSB(=HSV), HSL 등 굉장히 많이
carrotdesign.tistory.com
이미지 출처
원기둥 HSV 모델
먼셀 색체계
먼셀 색상환
HSB모델과 HSL 모델
'Graphics' 카테고리의 다른 글
| 색상 간의 혼합 - 기초 블렌딩 연산 (0) | 2023.10.09 |
|---|---|
| SDF (Signed Distance Field) (0) | 2023.09.17 |
| 디지털 색상과 수 (0) | 2023.06.25 |
| 왜곡 셰이더 만들기 (0) | 2023.05.15 |
| 타일별로 크기 조절이 되는 셰이더 만들기 (0) | 2023.03.30 |
