색상 코드는 특정 색상을 나타내는 6자리 코드입니다! 헥스 코드라고도 불리죠. 각 색상은 저마다 고유의 코드를 가지고 있어요.
색상코드를 표시할 때는 보통 샵(#)을 적고 그 뒤로 여섯 자리 숫자나 문자가 들어갑니다. 숫자는 0부터 9까지 모두 쓰이며 문자는 a에서 f까지 쓰입니다. 예를 들어 #1234af는 색상코드이고, 이런 색을 뜻합니다. 검은색의 색상코드는 #000000, 흰색의 색상코드는 #ffffff, 빨간색의 색상코드는 #ff0000입니다. 이 색상 코드만 알고 있으면 말로 표현하기 애매한 색상도 쉽게 남들에게 전해줄 수 있죠. 포토샵같은 이미지 편집 프로그램에서도 많이 쓰이고요.
왜 색상 코드가 이렇게 표현되는지 자세히 아시려면 컴퓨터가 색상을 표현하는 원리에 대해서 이해해야합니다. 이에 대해서 같이 알아봅시다!
컴퓨터가 색상을 표현하는 원리
빛의 3원색하면 무엇이죠? 바로 빨강, 초록, 파랑이죠. 영어에서 앞글자를 따와서 RGB라 부르기도 하죠. 현실에서 이 3가지 빛을 섞으면 모든 색깔을 만들 수 있습니다. 컴퓨터에서도 마찬가지로 모든 색상을 이 3가지 색상이 얼마냐 섞였는지로 구분합니다.
그리고 컴퓨터는 각 색상이 얼마나 있는지를 숫자로 표현합니다. 이 숫자를 8비트로 저장하는데요, 2진법 8자리 숫자라고 생각하시면 됩니다. 이것을 우리가 흔히 쓰는 10진법으로 바꾸면 0부터 255까지의 숫자죠. 숫자가 0이면 해당 색이 전혀 들어가 있지 않다는 뜻입니다. 숫자가 255면 해당 색이 최대로 들어가 있다는 뜻이고요.
예를 한번 들어볼까요? 흰색은 3가지 색이 모두 최대치만큼 들어있는 상태죠. 그러니 (빨강, 초록, 파랑)으로 표시하면 (255, 255, 255)일 것입니다. 반대로 검은색은 3가지 색이 전혀 들어가있지 않은 상태죠. 그러니 (0,0,0)으로 표현되겠지요. 노란색은 빨강과 초록만 들어가있고 파랑은 들어가있지 않은 상태이니 (255,255,0)으로 표현됩니다! 이를 표로 정리하면 아래와 같아요.
색상
(빨강, 초록, 파랑)
빨강
(255, 0, 0)
초록
(0, 255, 0)
파랑
(0, 0, 255)
노랑
(255, 255, 0)
청록
(0, 255, 255)
마젠타
(255, 0, 255)
흰색
(255, 255, 255)
검은색
(0, 0, 0)
참고로 (빨강, 초록, 파랑)과 같은 표기법을 RGB 10진 코드라 불러요. rgb값을 10진법으로 나타냈다는 뜻입니다.
그렇다면 이 표기가 어떻게 우리가 알고있는 6자리 색상코드가 되는 것일까요? 이에 대해서는 추가로 16진법에 대해서 아셔야합니다!
16진법이란?
진법이란 특정 수를 자릿수가 올라가는 기준으로 잡겠다고 하고 수를 표시하는 규칙입니다. 그리고 각 자리수에는 해당 수만큼의 숫자가 들어갈 수 있게 되죠.
예를 들어서 10진법에는 10이 될 때마다 한 자릿수가 올라가게 되죠. 또 한 자리수에는 0부터 9까지, 총 10개의 숫자가 들어가게 됩니다. 2진법에서는 2가 될때마다 한 자릿수가 올라가고, 각 자리수에는 0하고 1, 2개의 숫자만 들어갈 수 있습니다. 마찬가지로 16진법은 16이 될 때마다 자릿수 하나가 올라가고, 각 자리수에는 0부터 15까지의 숫자가 들어갑니다.
위에서 설명했다시피 16진법에서 각 자리수에는 0부터 15까지의 숫자가 들어갑니다. 하지만 10이상의 수를 그냥 넣으면 자릿수하고 해깔리겠지요. 그래서 10 이상의 숫자에는 a부터 f까지의 알파벳을 붙여 하나의 문자로 표시하기로 약속했습니다. 아래 표와 같이요!
숫자
0~9
10
11
12
13
14
15
표기
동일
a
b
c
d
e
f
168(10진법) = 10*16 + 8 = a8(16진법)
그럼 이제 10진법으로 표기된 수를 16진법으로 바꿔볼까요? 예를 들어 168이라는 수를 예로 들어봅시다. 16진법에서는 16이 되면 한 자릿수가 늘어나므로, 168이 16으로 얼마나 나누어 떨어지는지를 확인하면 되겠지요. 나누어 보면 10으로 나누어 떨어집니다. 그럼 두번째 자리 숫자는 10을 뜻하는 a가 됩니다. 나머지는 8이므로 첫번째 자리 숫자는 8이 되요. 결국 168을 16진법으로 표현하면 a8이 되겠지요!
da(16진법) = 13*16 + 10 = 218(10진법)
반대로 16진법으로 표기된 수를 10진법으로 바꿔봅시다! 두 번째 자릿수는 13을 뜻하는 d이므로 13*16을 해줍니다. 첫 번째 자릿수는 10를 뜻하는 a이므로 10를 거기다가 더해줍시다. 계산하면 218이 나옵니다!
색상코드의 의미
눈치가 빠르신분은 위의 색상 코드에도 알파벳이 a부터 f까지밖에 없다는 사실을 눈치채셨을겁니다. 그렇습니다. 색상 코드는 바로 16진법으로 표기된 수입니다!
색상코드에서 앞의 두 자리 수는 16진법으로 빨강을 뜻합니다. 중간 두 자리 수는 초록을 뜻하고, 마지막 두 자리 수는 파랑을 뜻하죠. 이제 이 두 자리 16진법 수를 10진법으로 바꿔준다면 각 색상이 얼만큼 들어있는지 알 수 있겠죠. 반대로 각 색상이 얼만큼 들어있는지 나타낸 10진법 수를 16진법으로 바꿔준다면 색상코드를 만들 수 있겠고요. 아래는 이런 식으로 변환한 예시입니다!
색상 코드 #RRGGBB
RGB 코드 (R, G, B)
#5865f2
(88,101,242)
#3ba55c
(59,165,92)
#ed4245
(237,66,69)
#faa61a
(250,166,26)
#f47fff
(244,127,255)
그리고 이제 색상코드의 원리를 알았으므로 색상 코드만 보고도 어떤 색깔인지 대략적으로 알 수 있습니다. 예를 들어 색상코드에서 특정 색이 00이면 그 색이 전혀 들어가지 않았다는 뜻이겠죠. 또 만약 ff이면 최대로 들어갔다고 할 수 있고요. (그래서 검은색의 색상 코드는 #000000, 흰색의 색상 코드가 #ffffff입니다) 또 #a3a3a3처럼 두 자리씩 같은 내용이 반복된다면 빨강, 초록, 파랑 3가지 색이 같은 양만큼 들어갔다는 뜻이므로, 회색이겠구나 하고 추측할 수 있죠.
마치며
지금까지 색상코드의 뜻과 원리에 대해서 알아봤습니다. 혹시 사진이나 현재 화면에서 색상코드를 쉽게 추출하는 법이 궁금하시면, 아래 글을 살펴봐주세요!
댓글