프로그래밍에서 컬러를 다루는 것은 어느 언어에서건 빼놓을 수 없습니다. 그리고 컴퓨터에서는 보통 rgb값으로 색을 표현합니다. RGB는 각각 red, green blue의 첫 알파벳입니다.
RGB 가산혼합 CMYK 감산혼합 |
RGB를 가산혼합이라고 하는 이유는 색을 더해 갈수록 밝기가 증가하기 때문입니다. 쉽게말해서 빛이 합쳐지는 것과 같은 원리입니다.
반대로 물감을 섞는것처럼 섞을수록 검은색이 되가는 혼합을 CMYK 즉 감산혼합이라고 합니다. 역시 색이 더해질수록 밝기가 감소하기 때문에 감산이라고 표현합니다. 아래에 이미지에 개념이 잘 나와있습니다.
한 번에 이해가 잘 가게끔 나타나있죠? CMYK는 보통 포토샵이나 일러스트에서 출력물을 만들 때 사용합니다. 이유는 감산혼합으로 제작한 출력물이 조금더 실제 색상에 가깝기 때문입니다. 왜 그럴까요? 당연히 실제 출력물은 잉크로 이루어져 있기 때문입니다. 따라서 출력물은 감산 혼합일 수 밖에 없는것이죠. 레이저 프린터도 마찬가지로 CMYK입니다.
RGB와 CMYK의 차이 |
프로그래밍에서는 당연히 RGB를 사용합니다. 왜그럴까요? CMYK의 각각의 색상값들은 농도 퍼센트로 0부터 최대 100까지 표현할 수 있습니다. 경우의 수로 따지자면 101x101x101가지 색상 즉 1,030,301 -> 총 약 백만 가지의 색상을 표현할 수 있다는 말이죠. 충분하지 않냐구요?
RGB는 각각의 색상값들이 최소 0부터 255까지 표현할 수 있습니다. 256x256x256 = 16,777,216가지를 표현할 수 있습니다. CMYK에 비하여 10배도 훨씬넘는 색상들을 표현할 수 있습니다.
그래프를 보시면 RGB색상은 가시영역(Visible Spectrum)의 대부분의 색상을 표현할 수 있습니다. 하지만 CMYK는 훨씬 더 작은 영역을 표현한다고 나와있죠. 결론적으로 RGB값이 CMYK보다 풍부한 색상을 표현할 수 있다는 말입니다. 출력을 할필요없는 프로그래밍에서 굳이 CMYK를 사용할 이유가 없습니다.
RGB에서 CMYK로 색상을 변경하게 되면 CMYK는 그 색상을 동일하게 재현할 수 없습니다.
이게 출력물제작에 CMYK를 이용하는 이유입니다. RGB로 제작했는데 출력물은 CMYK입니다. 당연히 예상했던 컬러가 아니겠지요?
애초에 CMYK로 제작을 해야 출력물이 제작물과 동일하게 출력이 되는 것입니다.
그런의미에서 RGB컬러를 웹용 색상 CMYK컬러를 출력용 색상 이라고도 부릅니다.
CSS에서의 RGB |
그럼 CSS에서 RGB가 어떻게 쓰이는지 확인해보겠습니다.
.MyClass { background-color:#101010; }
위 처럼 클래스의 배경이 #101010 으로 지정되어있습니다. #(red)(green)(blue) 로 표현됩니다.
이렇게 색상이 나타나는걸 볼 수 있습니다. RGB값이 동일한 값이라면 세 가지 빛의 양이 동일하게 혼합되어 채도가 없는 색이 나타납니다.
여기서 궁금하신 분들이 있으실 수 있습니다. #(red)(green)(blue) 이렇게 표현이 되는데 두자리로 어떻게 색상당 256가지를 표현할 까요? 답은 16진수로 표현되기 때문입니다. 16진수 두자리면 각각 자리당 16자리씩 십진수로 총 256가지의 숫자 표현이 가능합니다. 00 ~ FF 이게 0~255라는 말이죠. 16진수에 관해 생소하신 분들은 검색해보시기 바랍니다.
간단하게 몇가지 색상을 나열해보자면
빨강 : #FF0000
초록 : #00FF00
파랑 : #0000FF
검정 : #000000
흰색 : #FFFFFF
CSS에서는 이런 기본색상들을 영어로 표현이 가능합니다. red,green,white,grey 처럼 말이죠.
위의 #101010 이라는 수를 봤을 때 거의 검은색에 아주 가까운 무채색 이라는 것을 예측할 수 있습니다.
이제 # 과 6자리로 이루어진 색상을 보시면 대략적으로 무슨 색일지 예상해보실 수 있겠죠? (사실 그럴필요는 없습니다...)
하지만 원하는 색상을 찾을 때 언제 비교해보며 정확히 찾을 수 있겠습니까?
프로그래밍 하는데 숫자로 예측하는건 비효율적이죠. 그냥 이해만 하고있어도 상관이 전혀 없습니다.
컬러 찾기 |
유용한 프로그램 하나를 추천해 드리겠습니다.
Color Cop
colorcop.zip
스포이드를 그냥 원하는 부분으로 드래그하면 됩니다. 10진수는 물론 16진수 코드로 변환해주기 때문에 하주 간편한 프로그램이죠?
웹이든 동영상이든 아무 상관이 없습니다. 모두 RGB로 이루어진이상 정확한 색상값을 추출 해줍니다.
그러니까 프로그래밍을 하면서 RGB값을몰라 고민할 필요는 없겠죠?
다른 방법으로는 스크린샷을 찍어서 그림판, 포토샵 등을 이용해 추출하는 방법도 있지만 역시 프로그램이 제일 편합니다.
감사합니다.
