티스토리 블로그 운영을 시작할 때 가장 먼저 자신이 원하는 스킨을 적용하게 됩니다. 스킨을 적용이 끝나고 나면 기본 개발자가 만든 디자인을 그대로 활용하시는 분들도 있지만 저처럼 '글꼴 크기, 글꼴 스타일, 색상, 모양, 디자인' 등 다양한 요소를 자신의 취향에 맞게 수정하시는 분들도 많습니다.
저도 티스토리를 운영하면서 혼자 인터넷 검색으로 학습해가며 조금씩 수정하고 있습니다. 제가 티스토리 스킨에서 가장 먼저 수정을 시도했던 게 기본 스킨 디자인에서 각 요소에 대한 색상을 변경하는 작업이었습니다.
처음에는 색상을 어떻게 변경하는지 몰라 당황했는지 검색을 통해 거기까지는 쉽게 접근해서 해결할 수 있었습니다.
오늘은 HEX COLOR CODE가 무엇인지 대해서 자료 조사한 내용을 정리해보려고 합니다. 추후 제가 보기 위한 용도지만 누군가에게는 도움이 되는 내용이 되지 않을까 생각합니다.
HEX COLOR CODE (헥스 컬러코드)란 무엇인가?
인터넷 검색 포털에 HEX COLOR CODE (헥스코드)를 검색해보면 생각보다 설명이 많지 않았습니다. 글로벌 구글에서 검색해도 마찬가지더군요. 결국 해외 분들이 올리신 정보를 번역기로 돌리면서 자료를 수집했습니다.
보통 COLOR CODE(컬러코드)를 사용하시는 분들은 웹디자이너나 웹사이트를 제작하고 만드는 개발자분들이 주로 활용하고 있습니다.
웹디자이너분들은 주로 RGB 색상코드를 주로 사용하시고 CMYK는 주로 인쇄물에 적용하는 컬러코드라고 하는데 이 부분은 추후 자료 조사해서 다시 다뤄볼 생각입니다.
포토샵에서 색상 피커를 실행해주시면 내가 선택한 RGB, CMYK, HEX COLOR CODE 정보를 모두 확인할 수 있습니다.
포토샵이 설치되어 있지 않더라도 색상 추출해주는 웹사이트 혹은 프리웨어가 수두룩하기 때문에 누구나 마음만 먹으면 쉽게 컬러코드를 알아낼 수 있습니다.
HEX COLOR CODE (헥스 컬러코드)는 색상코드 앞에 '#'과 뒤에 붙는 6자리 16진수로 나타내는 것으로 HEX COLOR CODE로 나타낼 수 있는 색상의 수는 16의 6승인 16,777,216가지입니다.
HEX COLOR CODE는 6자리 숫자를 두 자리씩 끊어서 각각 'R', 'G', 'B'를 나타냅니다.
6자리 숫자에 숫자가 아닌 문자로 표기되는 이유는 HEX COLOR CODE가 16진수로 표현되기 때문입니다.
코드 앞자리 숫자가 0에 가까울수록 채도가 감소하여 검은색 계열에 가까워지고, F에 가까울수록 채도가 증가하여 흰색 계열에 가까워지게 됩니다.
HEX COLOR CODE와 RGB COLOR CODE는 어떻게 다를까?
HEX COLOR CODE는 16진법으로 표현되지만 RGB COLOR CODE는 10진수로 표현합니다.
HEX COLOR CODE '#FFFFFF'는 #-FF(R)-FF(G)-FF(B)로 구분되고, 이 코드를 RGB COLOR CODE로 변환하면 RGB(255, 255, 255)가 됩니다.
풀이) 맨 앞에 두 자리 숫자를 변환하면 'FF = F(15) * 16 + F(15) = 240 + 15 = 255'가 됩니다. 같은 방법으로 두 자리씩 동일하게 계산하면 rgb(255(ff), 255(ff), 255(ff))가 되는 것입니다.
이처럼 앞에 첫 번째 자리에 16을 곱하고 뒷자리는 16진수 값 그대로 더해주시면 RGB COLOR CODE로 변환 가능합니다.
그럼 이번에는 RGB COLOR CODE 값인 rgb(255,0,0)를 HEX COLOR CODE로 변환하려면 어떻게 해야될까요?
이 방법은 더 간단합니다. 각 자리 수를 16으로 나누어주시면 몫과 나머지 값을 도출할 수 있는데 여기서 몫은 HEX COLOR CODE의 첫 번째 자릿수 'F', 나머지는 두 번째 자릿수 'F'가 됩니다.
웹에서 사용하는 색상코드에 대한 기초 지식이 부족한 상태로 접근하는 거라 제 기준에서는 나중에 스스로 다시 상기할 수 있을 정도로 최대한 쉽게 내용을 적었습니다.
색상코드에 대한 정의는 다소 부족하지만 RGB와 HEX 컬러코드가 어떻게 다르고 어떻게 변환 가능한지는 비교적 쉽게 이해하실 수 있을 거라고 생각합니다.