색의 기본 요소
색상 · 명도 · 채도
◉ 색의 기본 요소
- 색에는 색상, 명도, 채도의 3가지 성질이 있다. 이를 3속성이라고 한다.
1. 색상(Hue)
- 빨강, 노랑, 파랑, 녹색이라고 부르는 색조를 색상이라고 하고, 비슷한 색을 나란히 원형으로만든 것을 색상환이라고 한다.
- 색상값 H는 가시광선 스펙트럼을 고리모양으로 배치한 색상환에서 가장 파장이 긴 빨강을 0°로 하였을 때 상대적인 배치 각도를 의미한다. 때문에 H 값은 0°~360°의 범위를 갖고 360°와 0°는 같은 색상 빨강을 가리킨다.
- 빨간색에 노란색을 섞으면 오렌지색이 되고 노란색에 녹색을 섞으면 노란색을 띤 녹색이 된다.
2. 명도(Value)
- 명도는 색의 밝기를 나타낸다.
- 명도가 높을수록 흰색에 가까워진다. 즉 명도가 가장 높은 색이 흰색이고 가장 낮은 색은 검은색이다.
- 파란색의 명도가 높은 색(흰색 혼합)이 하늘색이고, 명도가 낮은 색(검은색 혼합)이 감색 같은 어두운 파란색이 된다. 무채색은 명도만 사용해서 색을 표현한다.
- 명도값 V는 흰색, 빨간색 등을 100%, 검은색을 0%로 하였을 때 밝은 정도를 나타낸다.
 |
 |
3. 채도(Saturation)
- 색의 선명함, 색조의 세기를 말한다.
- 채도가 높으면 순색에 가까워지고 색에 회색을 더해가면 채도가 낮아진다.
- 무엇보다 채도가 높은 순색에 가까운지, 색조가 없는 무채색(흰색, 회색, 검은색)에 가까운지 하는 색조의 강도 차이를 나타낸다.
- 채도값 S는 특정한 색상의 가장 진한 상태를 100%로 하였을 때 진함의 정도를 나타낸다. 채도값 0%는 같은 명도의 무채색을 나타낸다.
※ 순색 : 유채색의 각 색상 중에서 가장 선명한 색(가장 채도가 높은 색상)이다. s=100
※ 무채색 : 채도가 없는 색. s=0
색상
HSV 색 공간과 색상
HSV 색 공간에서 색상 값 H는 먼셀의 색 체계를 기반으로 한 색상환에 대응하여 빨강을 기준으로 한 각도로 표현된다.
| 웹 색상 | H 값 | HSV 좌표 | 색 이름 | RGB 가산혼합 |
| #FF0000 | 0 | (0,100,100) | 빨강 | 원색 |
| #FF7F00 | 30 | (30,100,100) | 주황 | 빨강과 라임의 3:1 혼합색 |
| #FFFF00 | 60 | (60,100,100) | 노랑 | 빨강과 라임의 1:1 혼합색 |
| #80FF00 | 90 | (90,100,100) | 연두 | 빨강과 라임의 1:3 혼합색 |
| #00FF00 | 120 | (120,100,100) | 라임 | 원색 |
| #00FF80 | 150 | (150,100,100) | 춘록 | 라임과 파랑의 3:1 혼합색 |
| #00FFFF | 180 | (180,100,100) | 시안 | 라임과 파랑의 1:1 혼합색 |
| #0080FF | 210 | (210,100,100) | 바다색 | 라임과 파랑의 1:3 혼합색 |
| #0000FF | 240 | (240,100,100) | 파랑 | 원색 |
| #8000FF | 270 | (270,100,100) | 보라 | 파랑과 빨강의 3:1 혼합색 |
| #FF00FF | 300 | (300,100,100) | 마젠타 | 파랑과 빨강의 1:1 혼합색 |
| #FF007F | 330 | (330,100,100) | 장미색 | 파랑과 빨강의 1:3 혼합색 |
| #FF0000 | 360 | (360,100,100) | 빨강 | 원색 |
- 0도와 360도는 같다.
채도와 색상
빨강의 채도 변화에 따른 색상의 변화는 다음의 표와 같다.
| 웹 색상 | S 값 | HSV 좌표 |
| #FF0000 | 100 | (0,100,100) |
| #FF3333 | 80 | (0,80,100) |
| #FF6666 | 60 | (0,60,100) |
| #FF9999 | 40 | (0,40,100) |
| #FFCCCC | 20 | (0,20,100) |
| #FFFFFF | 0 | (0,0,100) |
명도와 색상
빨강의 명도 변화에 따른 색상의 변화는 다음의 표와 같다.
| 웹 색상 | V 값 | HSV 좌표 |
| #FF0000 | 100 | (0,100,100) |
| #CC0000 | 80 | (0,100,80) |
| #990000 | 60 | (0,100,60) |
| #660000 | 40 | (0,100,40) |
| #330000 | 20 | (0,100,20) |
| #000000 | 0 | (0,100,0) |
출처 : 위키백과
명도
흔히 명도(明度, 문화어: 검밝기)가 낮으면 '어둡다'고 표현하며, 높으면 '밝다'고 표현한다. 이를테면, '어두운 회색', '밝은 회색'과 같이 쓰인다. HSV 색공간에서 명도(Value)는 색상(Hue), 채도(Saturation)와 함께 하나의 색을 지정하는 좌표를 이룬다.
색공간과 명도
아래의 표는 주황색을 기준으로한 명도값의 변화를 나타낸 것이다.| 웹 색상 | B 값 | HSB 좌표 | RGB 좌표 |
| #FF8800 | 100 | (32,100,100) | (255,136,0) |
| #CC6D00 | 80 | (32,100,80) | (204,109,0) |
| #995200 | 60 | (32,100,60) | (153,82,0) |
| #663600 | 40 | (32,100,40) | (102,54,0) |
| #331B00 | 20 | (32,100,20) | (51,27,0) |
| #000000 | 0 | (0,0,0) | (0,0,0) |
HSV 색공간에서는 명도를 0~100 사이의 값을 갖는 명도값 B로 표현한다. 명도 0은 가장 어두운 상태이므로 오직 검정만을 의미한다.
명도와 색상
아래의 표는 명도값 B의 차이에 따른 색상의 변화를 비교한 것이다. 표안의 좌표는 HSB 값이다. 비교를 위해 채도를 최댓값으로 고정하였다.
| H | B=100 | B=75 | B=50 | B=25 |
| 0 | (0,100,100) | (0,100,75) | (0,100,50) | (0,100,25) |
| 60 | (60,100,100) | (60,100,75) | (60,100,50) | (60,100,25) |
| 120 | (120,100,100) | (120,100,75) | (120,100,50) | (120,100,25) |
| 180 | (180,100,100) | (180,100,75) | (180,100,50) | (180,100,25) |
| 240 | (240,100,100) | (240,100,75) | (240,100,50) | (240,100,25) |
| 300 | (300,100,100) | (300,100,75) | (300,100,50) | (300,100,25) |
| 360 | (360,100,100) | (360,100,75) | (360,100,50) | (360,100,25) |
명도와 채도
아래의 표는 HSV 색공간에서 색상값 H가 240인 파랑 계열 색의 명도값 B가 100일 때(파랑)와 75, 50(남색), 25로 변화할 때 채도의 변화에 따른 색상의 변화를 나타낸 것이다. 표안의 좌표는 HSB 값이다. 채도가 낮을수록 같은 밝기의 무채색에 가까워진다.
| S값 | B=100 | B=75 | B=50 | B=25 |
| 100 | (240,100,100) | (240,100,75) | (240,100,50) | (240,100,25) |
| 80 | (240,80,100) | (240,80,75) | (240,80,50) | (240,80,25) |
| 60 | (240,60,100) | (240,60,75) | (240,60,50) | (240,60,25) |
| 40 | (240,40,100) | (240,40,75) | (240,40,50) | (240,40,25) |
| 20 | (240,20,100) | (240,20,75) | (240,20,50) | (240,20,25) |
| 0 | (0,0,100) | (0,0,75) | (0,0,50) | (0,0,25) |
채도값 S가 0일 때는 무채색이 되므로 색상값 H는 0이 된다.
출처 : 위키백과
채도
색이 보다 선명할수록 채도가 높다고 말하며 회색이나 흰색 또는 검정과 같은 무채색에 가까울수록 채도가 낮다고 말한다. 채도가 높은 색을 말할 때는 흔히 '짙다'고 표현하고, 반대로 채도가 낮은 색을 말할 때는 흔히 '흐리다'는 표현을 사용한다. 예를 들어 짙은 노랑, 흐린 노랑과 같이 표현할 수 있다.
HSV 색공간에서 채도(Saturation)는 색상(Hue), 명도(Value)와 함께 하나의 색을 지정하는 좌표를 이룬다.
HSV 색공간과 채도
HSV 색공간에서 채도값 S는 같은 정도의 명도를 지닌 무채색으로부터 얼마나 짙은 색상을 표현하는지에 대한 좌표이다. 무채색은 채도 0 에 해당한다. 채도값 S는 0에서 100 까지의 값을 갖는다. 아래의 표는 고동색에 대한 채도값 변화에 따른 색상의 변화를 나타낸 것이다. 채도가 낮을수록 점차 회색에 가까운 색상으로 변하는 것을 알 수 있다.
| 웹 색상 | S 값 | HSV 좌표 |
| #800000 | 100 | (0,100,50) |
| #801A1A | 80 | (0,80,50) |
| #803333 | 60 | (0,60,50) |
| #804D4D | 40 | (0,40,50) |
| #806666 | 20 | (0,20,50) |
| #808080 | 0 | (0,0,50) |
RGB 가산혼합과 채도표현
위의 표에 표기된 웹 색상의 십육진수값의 변화를 살펴보면 RED 채널의 값이 고정되어 있는 상태에서 GREEN 채널과 BLUE 채널의 값이 동일하게 변화하고 있음을 알 수 있다. 이와 같이 RGB 가산혼합에서 특정 채널의 값(위 표에서는 RED 채널)을 고정시킨 상태에서 다른 채널의 값을 동일하게 증가시키면 채도가 낮아진다. RGB 가산혼합과 웹색상의 관계는 웹 색상항목을 참조하기 바란다.
주의
RGB 가산혼합과 채도표현에서 말하는 특정 채널이란 가장 값이 큰 채널을 말한다. 따라서 다른 채널의 값을 동일하게 증가시키더라도 특정 채널의 값보다 초과하면 색상은 전혀 다른 계열로 바뀐다. 위에서 고동색의 경우 웹 색상의 십육진수에 의한 RED 채널의 최댓값인 80이 채도의 포화값이 된다. 다른 채널의 값이 80을 초과하면 GREEN 채널과 BLUE 채널의 동일 비율 혼합인 옥색계열의 색이 될 것이다.
| 채널 포화값 초과에 따른 색상의 변화 | |
| #804040 | #80CCCC |
채도와 색상
아래의 표는 HSV 색공간에서 채도값 S의 변화에 따른 색상의 변화이다. 표 안의 순서쌍은 HSB 좌표를 나타낸 것이다. 비교를 위해 명도값 B를 80으로 고정시켰다.
| H 값 | S=100 | S=75 | S=50 | S=25 | S=0 |
| 0 | (0,100,80) | (0,75,80) | (0,50,80) | (0,25,80) | (0,0,80) |
| 60 | (60,100,80) | (60,75,80) | (60,50,80) | (60,25,80) | (0,0,80) |
| 120 | (120,100,80) | (120,75,80) | (120,50,80) | (120,25,80) | (0,0,80) |
| 180 | (180,100,80) | (180,75,80) | (180,50,80) | (180,25,80) | (0,0,80) |
| 240 | (240,100,80) | (240,75,80) | (240,50,80) | (240,25,80) | (0,0,80) |
| 300 | (300,100,80) | (300,75,80) | (300,50,80) | (300,25,80) | (0,0,80) |
| 360 | (360,100,80) | (360,75,80) | (360,50,80) | (360,25,80) | (0,0,80) |
- 채도값 S가 0일 때 무채색이 된다.
| 웹 색상 | S 값 | B 값 | HSB 좌표 |
| #FF8080 | 50 | 100 | (0,50,100) |
| #CC6666 | 50 | 80 | (0,50,80) |
| #994C4C | 50 | 60 | (0,50,60) |
| #663333 | 50 | 40 | (0,50,40) |
| #331A1A | 50 | 20 | (0,50,20) |
| #000000 | 0 | 0 | (0,0,0) |
명도 0은 검정을 의미한다.
출처 : 위키백과
채도를 낮추는 방법
1. 보색을 섞는 방법
색상환에서 서로 반대에 있는 색상을 보색이라고 하며, 보색을 서로 적당한 비율로 섞으면 무채색에 가까운 색이 나오게 된다. 무채색에 가까워진다는건 채도가 낮아진다는 뜻이므로 어느 한 색상의 채도를 낮추고 싶으면 보색을 섞어 채도를 조절 할 수 있다.
채도 조절을 연습해야하는 이유는 사물 본래의 색상을 만들어야 하는 경우도 있겠지만, 그보다는 같은 색상의 사물을 가까운 곳에 있는것과 멀리 있는 경우를 표현해야 할 때 더욱 효과적으로 표현해야 하기 때문이다.
2. 무채색을 섞는 방법
보색을 섞어 채도를 낮추는 방법 외에도 채도를 낮추는 방법이 있다. 아예 흰색이나 검은색, 회색 같은 무채색을 섞어버리는 것이다. 좀 단순한 방법 같지만 그래도 채도를 낮추는 방법으로서는 효과가 적지 않다. 뒤따르는 보너스도 있다. 이렇게 무채색이 들어가서 채도가 낮아지게 되면 보색이 들어가는 경우와 다른 성격의 색이 만들어진다.
보색의 합성은 마치 화학작용처럼 참여하는 원색들이 성격이 완전히 바뀌면서 새로운 색이 만들어지지만, 무채색의 첨가로 채도가 낮아지게 되면 원래 색의 속성은 그대로 유지되면서 채도가 낮아지는 특징이 있다.
원래 색에 하얀색이나 검은색이 첨가되면 색이 변질되지 않으면서 채도가 낮아진다. 즉 색의 밀도가 희석된다.
여기서 잠시 짚고 넘어가야 할 부분은 흰색과 검은색을 섞었을 때의 효과 차이다. 검은색을 넣어서 채도를 낮추었을 때와 흰색을 넣어서 채도를 낮추었을 때 만들어지는 색의 효과는 전혀 다르다. 이런 차이를 잘 파악하고 색을 사용하면 색 표현력은 한층 넓어지게 된다. 흰색을 섞으면 색이 밝아지고 검은색을 섞으면 색이 어두워진다고 단순하게 말할 수 없는 또 다른 특징이 있다.
이렇게 색의 성격이 연해지면서 채도가 떨어지게 되면 색의 분위기는 우아하고 부드러워지기 쉽다. 또한 채도가 낮아지더라도 색이 밝아지기 때문에 낮은 채도의 색 특유의 칙칙한 느낌을 찾아볼 수 없기도 하다. 채도가 낮은 색 특유의 차분함과 원색의 밝고 고급스런 분위기를 모두 가지고 있기 때문에 명품 브랜드들은 흰색이 많이 들어간 중간 채도나 저채도의 색을 많이 쓰고 있다.
