색 표현의 역사
1665년과 1666년, 뉴턴은 전국적으로 퍼진 흑사병을 피해 집으로 돌아와 있었는데, 이 시기에 중력 이론을 비롯한 많은 이론의 기초가 구상이 되었다. 그 중 하나가 광학이었는데, 광학 중에 특히 색채론에 대한 연구도 시작이 되었다.
학교에 돌아온 후, 1668년, 구입한 프리즘 세 개를 가지고 본격적인 연구에 착수했는데, 유명한 그의 기행은 이 시기에 많이 나타난다. 자거나 식사하는 것을 잊어버리기도 하고, 그런 일에 시간을 들이는 것도 아까워했다. 그의 정교한 실험에 친구들까지 동원되었다. 뉴턴의 한 지인은 뉴턴이 실험을 하기 위해 손을 쓰지 않았다면 연구를 하다 죽었을 것이라고도 했을 정도였다. 그의 실험결과와 이론은 1669년말과 1970년에 걸쳐서 "광학강의"라는 이름으로 정리, 발표됐다.[1]
그는 빛이 프리즘을 통해 여러 색으로 분리되었다가 렌즈를 통해 모이면 다시 흰 색으로 변하는 것을 예측, 관찰하고, 눈의 잔상효과를 사용해서 무지개빛을 빠른 속도로 번갈아 보여주었을 때 역시 흰 색으로 보인다는 것을 예상, 실험을 통해 확인하고나서 역사상 최초로 색채에 대해 체계적인 정리를 한다.
뉴턴은 무지개에 나타나는 빛이 빨간 빛에서 노랑, 초록을 거쳐 파란 빛의 색이 나타난 후 보랏빛이 나온다는 것이 파랑에 다시 붉은 빛이 섞이는 특징이라는 생각에서 통상 빨강에서 보라까지 순차적으로 보던 색을 다음과 같이 원형 바퀴에 담아내고 빛을 이루는 색의 원리를 설명한다.
원형 바퀴 주위에 각각의 색 이름이 있는데, 색을 7개로 분류한 것은 도, 레, 미, 파, 솔, 라, 시로 이루어진 음계를 모방한 것이다. 실제로, 위 그림에는 음계 이름이 적혀 있다. 치밀하게도, 반음에 해당되는 부분이 좁게 표시되어 있는데, 실제 우리 눈으로 보이는 무지개빛도 주황, 남색 부분이 잘 보이지 않는다는 것을 뉴턴은 음계와 연관지어서 마치 자연스러운 것인듯 설명했다. 뉴턴의 이러한 설명은 루카시안 교수가 된 지 얼마 되지 않은 뉴턴의 첫 강연에 대한 예우였는지 아니면 지식인들의 취향에 맞는 설명이 되었는지 모르겠지만 아주 적극적으로 받아들여져서 지금의 우리도 무지개빛을 빨강, 주황, 노랑, 초록, 파랑, 남색, 보라의 일곱 가지 이름으로 부르고 있다.
음계와 색을 연관지어 생각한 뉴턴의 주장은 얼마 가지 않아 문제제기가 되었다. 음계의 주기성과는 달리 빛은 가시광선 영역을 벗어나는 부분이 보이지 않는 것이 가장 큰 문제였다. 하지만, 적은 수의 색상으로 모든 색상을 표현할 수 있다는 발견은 중요한 것이었다. 그 결과로 빛의 삼원색인 빨강, 초록, 파랑이 조명빛의 표현의 기본색임과 색의 삼원색인 시안, 마젠타, 노랑이 인쇄 등의 출력물의 기본색임이 발견되어 모니터와 프린터 등 각종 기술에서 활용이 되고 있다. 실제로, 뉴턴이 활동하던 시기와는 비교도 할 수 없을 정도로 과학이 발달한 요즘에도 그래픽을 다루는 데서는 다음 그림과 비슷한 색상휠을 볼 수 있다.
여기서 설명할 색의 표현법도 이 방법에서 출발한다. 주변에서 흔히 보이는 LED 모니터에서 흰 색으로 표현된 부분을 확대하면 다음과 같은 모양으로 작은 LED들이 켜져있는 것을 확인할 수 있다.
모니터에는 빨강, 초록, 파랑의 빛을 띠는 LED가 연속적으로 배열되어 있는데, 흰 색을 표현할 때는 이 세 빛이 모두 가장 밝은 강도로 켜진다. 이 세 LED의 동작상태를 변경해가면서 다음과 같이 여러 색을 표현할 수 있게 된다.
 |
 |
 |
 |
포토샾이나 paint.net에서 볼수 있는, #AB0189와 같은 형식의 색상코드는 이 빨강, 초록, 파랑 빛의 강도를 16진수 숫자로 나타낸 것이다. 여기서는 이 LED의 밝기를 조절해 색상을 표현하는 방법 중 가장 많이 쓰이는 RGB, HSV, HSL 표현법에 대해 알아본다.
RGB 표현법
특별한 경우가 아니라면 우리가 모니터상의 색 표현을 위해서 사용하는 색상은 $256 \times 256 \times 256=16777216$개다. 이 색상을 빛의 삼원색인 빨강, 초록, 파랑색의 밝기를 256단계(0부터 255까지)로 나눠서 표현하는 것이 RGB 표현법이다. (RGB 색공간이라고 많이 부른다.) 앞서 표현한 16진수 표현법도 RGB 표현의 일종이다. 이해를 돕기 위해 마인크래프트에서처럼 색상을 기준점인 O에서 다음 그림의 규칙에 따라 배열하면 앞서 말한 16777216개의 색을 모두 표현할 수 있다. 그림에 나온 #xxxxxx는 16진수로 표현된 색번호이며, 화살표 방향으로 점점 커지는 숫자로 표현된다.
이렇게 색상을 16진수로 표현하는 것보다는 10진수를 사용하는 것이 편하므로 형태를 바꿔서 빨강을 rgb(255,0,0), 초록을 rgb(0,255,0), 파랑을 rgb(0,0,255)와 같이 나타내기도 한다. 그림의 빈 공간을 모두 채워서 검정색이 정면으로 보이는 방향에서 위 그림을 다시 보면 다음과 같다.
RGB 표현은 빛의 3원색을 이용한 표현이므로 원리적으로 이해는 쉽지만 인간이 색을 상상하는 방식과는 좀 차이가 있어서 다른 표현법이 필요하게 되었다.
HSL 표현법
HSL, HSV는 RGB로 표현된 색상을 보다 더 직관적으로 이해가 편하도록 색 배치를 바꾼 것이다. 1970년대에 들어서 컴퓨터 그래픽 소프트웨어에도 도입이 되기 시작해서, 앞서 잠깐 봤던 색상휠은 입체적으로 구성된 RGB cube의 일부를 보여준다. HSL에서 H는 색상(Hue), S는 채도(Saturation), L은 명도(Lightness)를 각각 나타내는 알파벳이다. 종종 HLS라고도 한다. 각 항목에 대해 더 구체적으로 알아보자.
색상, Hue
색이 다 채워진 RGB cube의 모습을 보면 알 수 있듯이, 빛의 삼원색인 빨강, 초록, 파랑의 배합은 아래 그림과 같이 RGB cube의 굵게 표시된 부분에서 사실상 다 이루어진다고 볼 수 있다. 다른 부분은 이 색상이 더 밝아지거나 어두워진 것으로 해석할 수 있다.
위 그림의 어두운 부분의 색을 한 평면에 다음과 같이 원형으로 배치한다.
좀 더 구체적으로 설명하면, 빨강을 원의 0도 방향, 초록을 120도 방향, 파랑을 240도 방향으로 배치하고, 그 사이에 RGB cube에서 나타난 각 색 사이의 색을 순서대로 배치한 것이다. 처음에는 색상이 잘 떠오르지 않겠지만, 익숙해져 가면 몇 도 방향이 어떤 색인지 쉽게 생각해낼 수 있다. Hue 값은 원하는 색이 위치한 방향을 각도로 표현한 것이다.
채도, Saturation
채도는 색상이 선명한 정도를 나타낸다. 채도는 백분율로 나타내는데, 100%일 때 해당 색이 가장 선명하고, 0%가 되면 해당 색의 선명도가 없어져서 흰 색과 검정색의 어느 중간 정도가 된다. 흑백사진에서 해당 색을 표현할 때 볼 수 있는 무채색이다. 채도 값은 대체로 백분율로 나타낸다.
명도, Lightness
HS로 시작하는 색상표현은 이 마지막 부분에 대한 약속이 조금씩 다르다. HSL에서 명도값 L은 0%에서 100%까지의 값을 가지며 클 수록 밝은 값이다. 100% 밝기에서는 모든 색이 흰 색이 되고, 0% 밝기에서는 모든 색이 검정색이 된다. 색상을 가장 선명하게 보려면 명도 값을 50%로 잡아야 한다. 다음 그림은 HSL에서 L값이 50%일 때의 색상들을 모아 그린 색상휠이다.
HSL 코드 입력
HSL은 웹 표준 색상중 하나다. 그래서, 특별한 이유가 없는 한 모든 웹 기술에서 사용할 수 있다. 색상 표현은 다음과 같은 규칙으로 한다.
hsl(hue, saturation, lightness)
hue 값은 위에서 설명한 각도를 숫자만 적어서 표현하고, saturation과 lightness 값은 특별한 상황이 아니면 %를 포함한 숫자를 적어준다. 예를 들어 선명한 빨강은 hue(0, 100%, 50%)로 표현한다.
HSV 표현법
W3C에서 정하는 색상에 현재 HSV는 포함되어 있지 않다. HSV는 CSS4라는 기술이 도입되면 HSB라는 이름으로 웹에서 사용이 가능해질 것이다. 실제로 HSV와 HSB는 같은 것이다. 포토샾과 같은 그래픽 프로그램에서는 HSL보다는 HSV를 더 많이 지원한다.
H, S가 각각 나타내는 색상과 채도는 여기서도 의미가 같기는 하지만, 마지막의 V(Value) 또는 B(Brightness)때문에 채도 개념이 달라보이는 효과가 있다. HSV 또는 HSB 표현에서 V 또는 B를 밝기라 하면 명도와 혼동되므로 색의 선명도를 나타낸다고 생각하면 된다. 다음 색상휠은 V 또는 B가 1, 즉, 100%일 때를 표현한다. 그래픽 프로그램에 보이는 색상휠은 아래 그림의 위/아래가 뒤집어져 있는 모양인 경우가 많은데, 각도를 읽는 방향의 차이 때문에 뒤집힌 것이다.
V=0 또는 B=0일 때는 다른 값에 관계없이 검정색이 된다.
투명도, 알파채널
RGB, HSL방식 모두에 투명도라는 것을 적용할 수 있다. 16진수 표현법에서는 #으로 시작하는 숫자의 일곱, 여뎗번째 숫자를 추가해서 투명도를 설정하기도 한다. 하지만, 이 방식은 일반적으로 적용되는 것은 아니라서, RGB방식에서는 rgba에 네 번째 값으로 투명도를 설정하고, HSL 방식에서도 hsla에 네 번째 값으로 투명도를 설정하는 경우가 많다. 이렇게 네 숫자의 순서쌍으로 나타내는 경우에 투명도를 나타내는 마지막 숫자는 소수점이 있는 숫자로 0부터 1까지의 숫자를 사용한다. 예를 들어 순수 빨강에 50%의 투명도를 준다면 RGB로는 rgba(255,0,0,0.5), HSL로는 hsla(0,100%,50%,0.5)로 표현한다.