[디자인기초] 헥사코드 : #33CCFF 이게 무슨 색인가요?

 

 

색을 부르는 다양한 명명법

기본색명

표색계에 의해 규정하고 있는 색명으로 우리나라는 한국산업규격(KS)에서 규정하여 빨강, 주황, 노랑, 연두, 초록(녹색), 청록, 파랑, 남색, 보라, 자주 등의 기본 10색을 사용하고 있습니다. 교육부에서는 먼셀 표색계의 색상환을 기준으로 앞의 기본색에 10색을 추가하여 20명을 사용하고 있습니다. 

 

일반색명

일반색명은 색을 감성적으로 이해하기 쉽고 빨리 전달하기 위해서 수식어를 붙여 부르는 색명입니다. 기본색명인 빨강, 주황, 노랑, 녹색, 파랑, 보라 등에 형용사나 수식어를 덧붙여서 ‘해맑은 빨강, 칙칙한 녹색, 어두운 파랑' 등으로 말합니다. 일반색명은 기본색명보다는 정확하지는 않지만 관용색명의 단점을 보완할 수 있고, 감성적인 전달이 쉬운 장점이 있습니다. 

 

관용색명

관용색명은 살구색, 팥색, 에메랄드 그린 등과 같이 오래전부터 전해오는 습관적인 색이름이나 지명, 장소, 사물 등의 고유한 이름을 붙여놓은 색을 말합니다. 관용색명은 고유한 사물이나 현상 등의 연상으로 인해 각 색을 이해하는 데는 편리하지만 색을 정확히 구별하기에는 어려움이 따릅니다. 그래서 정확한 구별이 요구되는 작업에는 일반색명과 같이 표색계에 의한 색명을 사용하고 있습니다. 관용색명의 예로는 황토색, 에메랄드 그린, 세피아, 쑥색, 팥색, 살구색, 올드로즈, 코코아, 쥐색, 베이지색, 페르시안 블루, 보르도, 눈색, 스카이 그레이 등입니다.

 

 

전자기기에서 사용되는 색은 빛의 혼합, 즉, 가산혼합

각 스펙트럼의 빛이 더해져서 색을 만들어내는 가산혼합은 동시혼색에 속하며 가법혼합, 빛의 혼합, 플러스혼합이라고도 합니다. 빛을 가하여 색을 혼합할 때에는 혼합한 색이 원래의 색보다 밝아지는 혼합방식이라서 가산혼합이라고 한다. 

 

빛의 3원색
이 가산혼합을 만들어내는 기본은 빛의 3원색 빨강(Red), 녹색(Green), 파랑(Blue)입니다. R, G, B의 3원색을 혼합하여 모든 색을 만들어내는 것입니다. 빛, 무대조명, 스크린, 모니터, 텔레비전 등에서의 색의 혼합은 이와 같은 방식으로 이루어집이다. 즉 색이 많이 혼합될 수록 밝아집니다. 

가산혼합의 특징
R, G, B의 3원색을 혼합하면 맑고 밝은 색을 얻을 수 있다. 2차색으로는 노랑, 마젠타, 시안을 얻을 수 있는데, 이것은 색료의 3원색이 된다. 3원색을 모두 혼합하면 흰색이 된다.
• 빨강(Red) + 녹색(Green) = 노랑(Yellow)
• 빨강(Red) + 파랑(Blue) = 마젠타(Magenta)
• 녹색(Green) + 파랑(Blue) = 시안(Cyan)
• 빨강(Red) + 녹색(Green) + 파랑(Blue) = 흰색(White)

 

 

 

디자인 작업에서의 RGB

우리가 작업하는 이미지는 최종 결과물을 어떤 방식으로 만드느냐에 따라 RGB방식으로 진행할지, CMYK방식으로 진행할지 정하게 됩니다. RGB방식의 경우, R, G, B 세가지 색에 대하여 각각 8비트의 색표현이 가능합니다. 즉, R (8비트->256가지), G (8비트->256가지), B (8비트->256가지) 이렇게 해서 256*256*256 = 16,777,216 가지의 색표현을 가능하게 합니다. 

 

다음은 포토샵 소프트웨어에서 정확한 R, G, B를 선택했을때의 색값을 보여줍니다. 이 세가지 색 이외의 색은 이제  R, G, B 세가지 빛의 혼합 정도를 0~255까지 조절하여 만들어집니다.  

 

헥사코드의 표현 방식

위의 포토샵의 컬러피커 RGB값 아래에  #ㅇㅇㅇㅇㅇㅇ과 같이 표기되는 칸이 보입니다. 이 값이 해당 칼라값을 헥사코드로 표현해 준 값입니다. 

 

앞의 RGB값의 숫자는 10진법으로 표기되었지만, 헥사코드는 16진법을 사용합니다. 아래 표에서 보는 것처럼 10진법은 0부터 9까지를 사용하고, 16진법에서는 0에서 9까지의 숫자 10개에 a부터 f까지 알파벳 6개를 더해 16개를 사용합니다. 즉 10진법에서 9보다 1큰 수는 10이지만, 16진법에서는 9보다 1큰 수는 a가 된다고 생각하면 됩니다. 

다음과 같이 6자리 숫자 중 맨 앞 2칸은 R, 중간 2칸은 G, 마지막 2칸은 B를 나타내는 값입니다.

즉, 색의 3원색 RED, GREEN, BLUE를 헥사코드로 표현하면 다음과 같습니다.

• RED :  #FF0000
• GREEN :  #00FF00
• BLUE :  #0000FF

이 점을 생각하면서, 다음의 샘플 색을 떠올려보기 바랍니다. 

1번의 경우, R값과 B값은 0입니다. 즉, 빨간 조명과 파란 조명은 꺼지고, 중간의 초록 조명만 켜져있는데, 그 값이 16진수에서 표현할 수 있는 두자리 숫자 중 제일 큰 FF입니다. 초록 조명을 최대치로 켠 것이므로 오른쪽과 같은 색이 나타납니다. 

2번의 경우, 1번에서 본것과 비슷합니다. 파란 조명은 꺼두고, 빨간 조명과 초록 조명을 최대치로 켰습니다. 물감의 혼색과 달리 빛의 혼합이기때문에 빨강과 초록의 혼색 결과인 노랑이 나타납니다. 

3번은 좀 랜덤한 숫자를 골랐지만, 예측할만한 수준으로 세개의 조명이 모두 켜져 있으나, 빨강보다는 초록이, 초록보다는 파랑이 세게 켜 있는 상황입니다. 그러므로 푸른 계열인데, 파랑만 켜있을때보다 더 밝아집니다. 

4번은 랜덤한 숫자로 보이지만, 주의깊게 볼것은 R, G, B 값이 같습니다. R, G, B 값이 모두 같게 0일 경우 검정, R, G, B 값이 모두 같게 FF일 경우 흰색입니다. 6C는 중간값이므로 검정과 흰색 중간의 어떤 회색이 나오게 됩니다. 

 

이제 색이 표현되는 자리에 저런 알파벳이 표시되더라도 당황하지 않고 살펴보시면, 대략 어느 정도 색일것이라 짐작하실 수 있게 되셨을 것 같네요. 포토샵 컬러피커에서 이리저리 움직이면서 살펴보시는 것도 도움될 것 같습니다. 

 

아, 그래서 #33CCFF는 무슨 색이냐구요? 

3번에 #3366FF가 있었는데, 다른 것은 중간의 66이 CC가 되었네요. 66보다 CC가 큰 값이고, 중간은 Green값이네요. 3번에 있는 파랑보다는 더 밝고 초록빛이 더 돌겠죠. (사실은 맨 위 사진을 그 값을 캡춰해서 다 들켰네요)