RGB를 HEX로 변환하는 법
왜 HEX값에는 G이상 알파벳이 없을까?
rgb(66, 134, 244)가 왜 #4286f4 인지 직접 계산해 봅시다.
안녕하세요. 저는 프론트를 공부하는 디자이너로, 얼마전 웹 개발자인 친구에게 배운 RGB, HEX와 관련된 기초적인 지식을 공유하고자 합니다. 많은 분들이 알고 계시리라 생각하지만, 개발자의 시선으로 바라보는 프론트를 몰랐던 저(a.k.a. 수포자)는 이 내용이 정말 재미있었기 때문에 혹시나 도움이 될까 싶어 이렇게 포스팅하게 되었습니다.
UI 디자인에서 색을 표기할 때는, RGB와 HEX 컬러를 사용합니다. 같은 듯 달라 보이는 이 두 표기법의 상관관계는 어떻게 될까요?
RGB와 HEX는 CMYK와 달리, 표기를 달리해도 1:1로 상응하기 때문에 정확하게 같은 컬러를 표시할 수 있습니다. 이는 둘다 빛을 기반으로 하기 때문에 가능합니다. RGB는 광학에서 나온 컬러를 빛의 삼원색으로 표현한 방법입니다. Red, Greed, Blue의 세가지 색 만으로 디지털 캔버스 내의 모든 색을 표현할 수 있습니다. 세 컬러는 섞을수록 밝아지며 완벽하게 혼합되었을 경우 화이트(빛)가 됩니다. 중학교 때 미술책에서 보던 빛의 삼원색을 생각하시면 됩니다.
추억 돋는 물감의 삼원색과 빛의 삼원색.HEX는 이 삼원색을 16진법으로 변환한 6자리수 앞에 해시(#)을 붙여 컬러를 표현하는 방법으로 컴퓨터언어입니다. 숫자로만 이루어진 10진수가 아닌 알파벳이 섞인 16가지의 숫자, 16진수이기 때문에훨씬 짧은 텍스트로 색을 표현할 수 있습니다.
HEX #FFFFFF가 흰색이라는 것을 모두 알고 계실 것입니다. 이 색은 동시에 RGB(255,255,255)으로 표기할 수 있습니다. 하지만 HEX가 훨씬 짧고 간결한 컴퓨터 언어이기 때문에, 코딩할 때 HEX로 주로 컬러를 표기합니다. 이제부터는 어떻게 RGB를 HEX로 변환할 수 있는지 알아보도록 하겠습니다.
RGB와 HEX
구글에 RGB to HEX라고 검색하면 나오는 화면입니다. 모니터에서 표현할 수 있는 색을 전부 보여주고 있습니다. 왼쪽에는 같은 컬러를 HEX, RGB로 보여준 코드값이 있어, 이를 통해 두 코드가 같은 컬러라는 것을 알 수 있습니다. 포토샵, 파워포인트, 어도비 컬러 등 많은 플랫폼에서 변환 표를 볼 수 있지만 이 링크가 접근이 가장 쉽기에 첨부했습니다.
앞서 소개한 컬러의 HEX값 6자리입니다. 6자리는 총 3등분으로 나뉩니다, 앞의 2자리는 Red, 중간 2자리는 Green, 뒤의 2자리는 Blue 영역을 표기합니다. 편의상 각 2자리의 앞자리는 Major Color, 뒷자리는 Minor Color라고 하겠습니다.
컬러칩을 설핏 봐도 색이 파란색에 가깝습니다. 그렇다면 Blue 값이 높아야겠죠? 아니나 다를까 R, G와는 달리 B의 Major Color는 숫자가 아닌 알파벳으로 되어 있습니다. 여기서 16진수를 사용했다는 것을 알 수 있습니다.
16진수를 모두 늘어 놓으면 다음과 같습니다. 10대신 A가 사용되고 13대신 D가 사용됩니다. RGB에 따라 생각해 보자면 #FFFFFF는 빛의 삼원색이 모두 최고치로 사용되었기 때문에 빛의 색인 화이트이고, #000000은 세가지 색이 모두 없기 때문에 어둠의 색인 블랙입니다.
위의 색 #4286f4의 Blue 값의 Major Color는 16진수의 가장 높은 값 F를 사용하고 있네요. 그래서 이 컬러는 파랗게 표현됩니다. 그렇다면 Minor Color는 무엇을 나타낼까요? Minor Color는 앞서 정해진 Major Color의 색이나 어두움을 정도를 표시하는 척도입니다. 이렇게 비교해 보겠습니다.
왼쪽과 오른쪽 컬러는 육안상으로 크게 차이가 나지 않지만 코드값으로는 명확한 차이가 있습니다. 두 컬러의 R,G값은 동일하고 B의 Major Color까지 같습니다. 오직 다른 것은 B의 Minor Color뿐입니다. 왼쪽의 B의 Minor Color는 가장 적은 값인 0, 오른쪽은 가장 높은 값인 F입니다. 그렇기 때문에 미묘하게 오른쪽이 더 밝아 보이는 것은 우리의 기분탓이 아닙니다. 8ㅅ8
Minor Color의 개념이 제일 이해하기 어려웠기 때문에 조금만 더 작성해 보겠습니다. Minor Color를 우리에게 익숙한 10진수로 예를 들자면, 1의 자리수로 이해하시면 됩니다. 1의 자리수는 2의 자리수보다 정교하고 세밀하므로 차이가 덜합니다. 99와 90의 차이보다, 99와 09의 차이는 수학적으로 훨씬 큽니다. 실생활에서도 돈이나 나이를 셀 때 앞자리를 더 중시하는 것을 보면 알 수 있습니다. 21살과 27살보다 20대와 40대의 차이가 더 크게 느껴지고, 5,100원과 5,900원의 가격차보다 3,300원과 7,300원의 가격차가 더 크게 느껴집니다. 그렇기 때문에 위의 컬러칩을 보았을 때 Blue의 Minor Color가 극단을 달리고 있어도, 육안상으로는 큰 차이가 없어보이는 것입니다. 하지만 코드상으로는 완벽하게 다른 컬러라는 것을 인지하고 있어야 합니다.
RGB값을 HEX로
직접 계산하기.
이제는 반대로 RGB을 HEX로 계산해 보도록 하겠습니다. RGB 값은 숫자만 보아도 색을 유추하기 정말 쉽습니다. 우리에게 익숙한 10진수를 사용하고 있고, 0부터 255까지 각 RGB의 정도를 따로 따로 보기 쉽게 구분해 두었기 때문입니다.
rgb(255,0,0)은 어떤 컬러일지 한 번 상상해 보세요. 부담스러울 정도로 시뻘건 색이 상상되지 않나요?
R값이 최대로 사용되었고, G,B는 사용되지 않았으므로 HEX값이 예상 가능하게 변환됩니다. 하지만 이것 만으로는 왜 255가 FF인지 명확하게 설명이 불가능합니다. 저는 수알못이지만 초등학교 때의 기억을 되살려, 나눗셈을 해 보겠습니다. R값의 255를 16진수로 표현하기 위해, 숫자 16으로 나누어 보겠습니다.
255를 16으로 나누면 15가 나옵니다. 혹시 딱 떨어지게 나뉘지 않는다면, 소수점까지 구할 필요는 없고 나머지를 그대로 두면 됩니다. 그렇게 되면 나머지가 딱 15가 나오네요. 16으로 나뉜 값 15는 16진수로 F이고 앞서 설명했던 Major Color가 되고, 나머지로 남겨둔 15가 Minor Color로 역시 F가 됩니다.
이제는 조금 더 복잡시러운 컬러로 나누어 보겠습니다. RGB 값이 제멋대로 분포되어 있는 하나의 컬러를 앞서 소개한 링크에서 마음껏 바꾸어가면서 골라 보았습니다.
청록빛이 가득해 보이는 컬러답게 R값은 낮고 G,B값은 다소 높습니다. 3처럼 16으로 나누어지지 않는 숫자는 0이 되고, 나머지 3을 그대로 남기면 됩니다그렇게 계산된 순서대로 배치하면 RGB 컬러의 HEX값이 나옵니다.
디자인으로 접근할 때 전달용으로 사용하던 코드 HEX값의 여섯자리 숫자가, 순서대로 R 2자리, G 2자리, B 2자리를 뜻하는 것을 몰랐던 저는 이 단순한 계산이 정말 재미있었습니다. 어차피 컴퓨터는 인간이 수기로 나누는 것보다 정확한 값을 초스피드로 계산해 주긴 하지만, 직접 나누어 보면서 원리를 알고 나니 컴퓨터에 표현되는 그래픽 코드를 더욱 긴밀하게 이해하고 싶어졌습니다. 이걸 왜 몰랐냐는 개발자 친구의 말에 스스로 반성도 하면서요. 앞으로 디자이너 입장에서 배우는 프론트를 파고 들어갈 생각이고, 알쏭달쏭 재미있는 인사이트가 등장하면 간간히 공유하겠습니다. 감사합니다.
