곁다리 지식

색의 속성과 색모델 RGB, CMYK, HSV (HSB), HSL

효니톰 2021. 4. 30. 12:15
728x90
반응형

안녕하세요 효니톰입니다.

 

사람은 약 100,000 ~ 1,000,000가지 컬러를 인지할 수 있다고 합니다.

이렇게 무수히 많은 색을 제대로 활용하기 위해서는 색의 속성에 대해 알아야 합니다.

 

특히 디자인 시 고려하는 형태, 배치, 색 중에서도 색은 대략적인 이미지를 결정하기 때문에 제대로 활용해야합니다.

 

 

과거의 사람들은 색의 개념을 수학적인 수치로 나타내고 싶어했습니다.

따라서 먼셀이라는 화가가 색을 색상, 채도, 명도를 기초로 색을 체계적으로 나타내는 색공간을 만들었습니다.

 

오늘은 여러 색모델 중에서도 RGB, CMYK, HSV (HSB), HSL 모델에 대해 알아볼 예정입니다.

 

 

 

RGB와 CMYK

(좌) RGB, (우) CMYK

 

먼저 쉬운 이해를 위해 사람이 색을 받아들이는 과정을 간략히 설명해드리겠습니다.

먼저 빛을 보면 사람 눈에 있는 망막이 빛을 시신경을 통해 뇌로 전달합니다.

이 뇌에 있는 원추세포 (색을 감지하는 세포)는 빛이 가진 파장에 민감합니다.

이를 가시광선 스펙트럼에 그려보면 빨강, 녹색, 파랑색에 반응합니다.

따라서 이 3가지 색을 가장 잘 보는 것이죠.

 

 

RGB

RGB는 대표적인 웹 컬러모드입니다.
빨강 (Red), 녹색 (Green), 파랑 (Blue) 3원색으로 구성됩니다.

 

컴퓨터에서는 이 3가지 색의 양을 0-255까지의 범위 내에서 조절해 무수한 색이 표현되는데요.

빛은 섞이면 흰색이 됩니다.

따라서 이 RGB에서는 3가지 색이 모두 빛의 속성을 가졌기 때문에 섞일 수록 명도가 높아집니다.

이를 가산혼합방식이라고 하며 정확히 1:1:1로 섞을 경우 마지막에는 흰색에 도달합니다.

 

 

CMYK

CMYK는 인쇄/출력 컬러모드입니다.
RGB와는 반대로 색을 섞을 수록 검은색에 가까워지기 때문에
인쇄를 위해 비교적 적은 잉크가 소모됩니다.
따라서 거의 CMYK 컬러를 이용한 인쇄만이 이루어지고 있죠.


RGB와는 반대로 감산혼합방식으로 불립니다.
청록 (Cyan), 자홍 (Magenta), 노랑 (Yellow), 검정 (Black) 4가지 색을 이용하는데요.
검정을 제외한 3가지 색을 섞으면 검정색에 가까워지며 빛과 거리가 멀어집니다.

 

 

RGB는 가장 많이 사용되는 모델이지만 색상의 밝기, 옅거나 진한 색을 원할 때

R, G, B 중 어떤 값을 바꿔야 하는지 알 수 없다는 문제점이 있습니다.

 

따라서 필요한 것이 아래에 있는 HSV와 HSL입니다.

 

 

HSV (=HSB)와 HSL

모든 색은 색의 속성, 즉 색상, 채도, 명도라는 세 가지 특성을 가집니다.

먼저 이 세가지에 대해 설명해드리겠습니다.

 

색상(Hue)

일반적으로 우리가 부르는 순수한 빛깔입니다.

0도 적색, 60도 황색, 120도 녹색, 180도 시안(청록색), 240도 청색, 300도에 마젠타(적보라색)를 표현할 수 있습니다.

 

채도(Saturation)
채도는 색의 포함
정도, 즉 색이 선명하고 진한 것을 말합니다.

맑고 탁함의 정도도 포함하며, 아무것도 섞이지 않은 원색일 수록 채도가 높습니다.

가장 채도가 높은 색은 섞임이 없는 순색, 가장 채도가 낮은 색은 무채색입니다.

 

명도 (Brightness)
명도는 색의 밝기로, 색상과 관계없이 밝고 어두움을 나타냅니다.

명도가 높을수록 흰색에 가깝고, 명도가 낮을수록 검정색에 가깝습니다.

 

채도와 명도 구분을 헷갈려하는 분들이 많은데요.

채도는 색에 회색을 섞고, 명도는 검정이나 흰색을 섞는 것입니다.

 

쉽게 생각하면 사진을 보정할 때, 밝기를 조정하면 사진이 하얘지거나 어두워져 잘 안보입니다.

반대로 채도 조정을 하면 흑백이 되거나 색이 아주 진해지죠.

 

 

(좌) HSV/HSB-원뿔, (우) HSL-이중원뿔

HSV는 색상 (Hue), 채도 (Saturation), 명도/깊이 (Brightness/Value)입니다.

따라서 HSB라고도 합니다.

색상 (H)는 0~360의 값을 사용하며, 채도 (S)와 명도 (B/V)는 0~100의 값을 사용합니다.

 

위 원뿔 이미지를 참조하면 이해가 쉽습니다.

- 채도가 0일 경우, 밝기 (V)가 100이면 흰색, 0이면 검정색

- 밝기 (V)를 올려야 최대 채도까지 사용 가능 (채도만 단독으로 올려도 색은 변하지 않음)

*채도가 0이면 무채색입니다.

 

 

HSL색상 (Hue), 채도 (Saturation), 명도/휘도 (Lightness/Luminance)입니다.

*휘도는 반사되는 빛의 양을 말하며, 쉽게 눈부심의 정도라고 할 수 있습니다.

 

얼핏 보면 비슷해보이는데요, 명도만 변형된 색모델입니다.또한 위 사진과 같이 채도와 명도가 정비례하기도 하죠.

 

- 밝기 (L)와 상관없이 채도 조절 가능, HSV보다 밝기의 폭이 넓어 더 많은 밝기 표현 가능

- 밝기 (L)는 HSV의 채도/명도에 영향을 주기도 하며, 포함한 빛의 양에 대한 측정값으로 휘도 등으로 표현

 

* 밝기(L)를 50% 이상 추가시 HSV의 채도 감소, 밝기 증가 (흰색을 추가하는 개념)
  반대로 밝기를 50% 이하 감소 시 HSV의 밝기에만 영향을 미쳐 V값 감소 (검정을 추가하는 개념)

 

 

 

이렇게 4가지 모델에 대해 알아보았는데요.

도움이 되셨다면 좋겠습니다.

 

 

반응형