RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해

웹 개발의 초창기 때부터 배경, 경계, 폰트 등 요소의 색을 다양하게 지정할 수 있었습니다. 일부는 웹에서 지원하는 컬러 키워드를 사용하기도 하지만, 어떤 이들은 HSL(Hue, Saturation, Lightness) 시스템을 사용하기도 합니다. 그러나 오늘날에는 RGB 컬러 코드와 16진수(HEX) 컬러 코드를 가장 많이 사용합니다. 이번 포스팅에서는 RGB 컬러 코드와 HEX 컬러 코드에 대해 살펴보도록 하겠습니다.

이 글은 RGB to Hex: Understanding the Major Web Color Codes를 번역 및 요약한 것입니다.

RGB 컬러 코드에 대한 이해

RGB 컬러 코드는 오늘날 웹 페이지에서 색을 정의할 때 가장 많이 사용되는 방법입니다. 때로는 RGBA 컬러 코드를 사용하기도 하는데, 이는 알파 채널에 값을 추가한 경우입니다. RGB 컬러 코드는 다음과 같이 사용합니다.

color: rgb(0, 0, 0,); /*black*/
color: rgb(255, 255, 255); /*white*/

RGB는 주요 색상인 빨강(Red), 초록(Green), 파랑(Blue)에서 비롯된 이름입니다. 전통적인 색상 이론에서는 이 세 가지 주요 색을 조합하여 모든 색을 표현할 수 있죠.

HEX 컬러 코드에 대한 이해

그렇다면 HEX 컬러 코드란 무엇일까요? 이는 RGB 컬러 코드와 실제로 동일한 원리입니다. 즉, RGB 컬러 모드로 색을 표현합니다. 다만, 이를 표현하는 방법에는 약간의 차이가 있습니다.

color: #000000; /*black*/
color: #FFFFFF; /*white*/

그렇다면 RGB 코드가 아닌 HEX 컬러 코드를 사용하는 이유는 무엇일까요? 다음은 HEX 컬러 코드의 장점들입니다.

• 보다 간결한 코드를 작성할 수 있습니다. HEX 컬러 코드의 경우, 일부 색상을 표현할 때 6자리 숫자가 아닌 3자리 숫자만 사용할 수도 있습니다.
• 웹 페이지 로딩 속도를 향상시켜줍니다. 컴퓨터는 2진수를 처리합니다. 16진수는 10진수에 비해 2진수로 변경되는 속도가 더 빠릅니다.
• 컬러 팔레트를 사용하는 다양한 프로그램에서 쉽게 복사할 수 있습니다. RGB는 3개의 별도의 숫자 값으로 색을 표현하는 반면, HEX는 하나의 값을 특정 색을 표현하는 데 사용합니다. 또한, HEX는 HTML과 CSS 코드에서 표준 색 표현 방법이기도 합니다.

RGB에서 HEX 컬러 코드로 변환하는 방법

RGB 컬러 코드는 우리에게 가장 익숙한 10진수 체계를 사용합니다. 10진수는 10개의 고유한 숫자(0~9)를 사용합니다.

 

HEX 컬러 코드는 16진수 체계를 사용합니다. 이는 16개의 고유한 숫자(0~9)와 문자(A-F)를 사용해 값을 표현합니다.

참고: 이러한 이유로 RGB 시스템에서 최대로 표현될 수 있는 값은 255가 됩니다. 16진수 시스템에서 한 번에 표현할 수 있는 최대 색상의 개수는 16* 16 = 256입니다. 즉, RGB에서는 0~255까지의 266개의 숫자로 색상을 표현할 수 있습니다.

다음은 10진수 체계와 16진수 체계를 비교하는 표입니다.

10진수	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
16진수	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

이제 이를 활용하여 RGB 컬러 코드를 HEX 컬러 코드로 변경할 수 있습니다. 다음과 같은 RGB 컬러 코드를 HEX 컬러 코드로 변경하면 어떻게 될까요?

color: rgb(220, 20, 60)

가장 먼저, 첫 번째 값인 220을 16으로 나눕니다. 220 / 16 = 13.75. 따라서 여섯 자리 HEX 컬러 코드의 첫 번째 컬러 코드는 13 = D가 됩니다. 다음으로, 나머지인 0.75에 16을 곱합니다. 0.75 * 16 = 12. HEX 컬러 코드의 두 번째 컬러 코드는 12 = C가 됩니다.

 

다음으로, 두 번째 값인 20에도 동일한 연산을 진행합니다. 20 / 16 = 1.25. HEX 컬러 코드의 세 번째 값은 1이 됩니다. 이제, 나머지인 0.25에 16을 곱해 4라는 값을 얻습니다. 지금까지 얻은 네 자리 HEX 코드는 #DC14입니다.

 

마지막 세 번째 값 60에도 동일한 연산을 진행합니다. 60 / 16 = 3.75. 따라서 다섯 번째 HEX 컬러 코드는 3입니다. 이제 마지막 숫자입니다. 0.75 * 16 = 12. 여섯 번째 HEX 컬러 코드는 C가됩니다.

 

따라서, rgb(220, 20, 60) = #DC143C이 됩니다.

HEX를 RGB 컬러 코드로 변경하기

이제 HEX 컬러 코드를 RGB 컬러 코드로 변경하는 방법에 대해 알아보도록 하겠습니다. HEX 컬러 코드를 사용하는 것이 유리할 때가 더 많지만, 간혹 가다 RGB에 투명도와 같은 알파 컬러를 추가하거나 웹 페이지를 프린트할 때 16진수 값이 아닌 RGB 값을 입력해야 할 수도 있습니다. 또한 자바스크립트에서 RGB 숫자 값에 연산을 진행해야 할 수도 있고요.

HEX 컬러 코드를 RGB로 변경하는 것은 조금 더 간단합니다. 다음과 같은 HEX 컬러 코드를 RGB로 변경해보도록 하겠습니다.

color: #DA70D6

첫 번째 D는 10진수의 13에 해당합니다. 이로부터 13 * 16 = 208이라는 값을 얻을 수 있습니다. 두 번째 A는 10에 해당합니다. 따라서 rgb 컬러 코드의 첫 번째 값은 208 + 10 = 218 입니다.

 

세 번째 7에 16을 곱해 112라는 값을 얻고, 네 번째 0에서 0이라는 값을 얻습니다. 따라서 rgb 컬러 코드의 두 번째 값은 112 + 0 = 112입니다.

 

마찬가지로 네 번째와 다섯 번째 HEX 컬러 코드에서 13 * 13 = 208. 208 + 6 = 214라는 값을 얻을 수 있습니다.

 

이를 정리하자면, #DA70D6 = rgb(218, 112, 208)이 됩니다.

마치며

이상으로 rgb, HEX 컬러 코드의 개념과 전환 방법에 대해 살펴봤습니다. 웹 페이지에서는 보통의 경우 HEX 컬러 코드를 RGB 컬러 코드보다 많이 사용하지만, 알파 컬러 등을 추가해야 할 경우 RGB 컬러 코드를 사용할 수도 있습니다. 각 RGB와 HEX 컬러 코드의 표현 방법을 이해한다면, 이를 각 컬러 코드로 쉽게 전환할 수 있습니다.