HEX RGB변환은 웹 디자인과 프론트엔드 개발에서 가장 자주 하게 되는 색상 작업입니다. 디자인 시안에 적힌 #2E86DE를 rgb(46, 134, 222)로 바꿔야 하는 상황은 CSS를 다루다 보면 수시로 찾아옵니다. 두 표기법은 결국 같은 색을 가리키며 표현 방식만 다를 뿐이라, 변환 원리를 한 번 이해해 두면 계산기 없이도 대략적인 값을 머릿속으로 잡아낼 수 있습니다.
HEX와 RGB는 무엇이 다를까요
두 표기법 모두 빨강, 초록, 파랑 세 가지 빛의 세기를 조합해 색을 만드는 방식입니다. 차이는 그 세기를 어떤 숫자 체계로 적느냐에 있습니다.
- HEX: 16진수로 표기합니다. #RRGGBB 형태이며 각 자리는 0부터 F까지 16개 문자를 사용합니다. 두 자리로 0에서 255까지를 표현합니다.
- RGB: 10진수로 표기합니다. rgb(46, 134, 222)처럼 세 값을 0에서 255 사이 숫자로 적습니다.
- 표현 범위: 둘 다 채널당 256단계, 총 16,777,216가지 색으로 완전히 동일합니다. 변환 과정에서 색이 손실되지 않습니다.
HEX는 짧고 복사하기 편해 디자인 툴과 스타일 가이드에서 표준처럼 쓰이고, RGB는 각 채널 값을 숫자로 다루기 때문에 자바스크립트로 색을 계산하거나 투명도를 조절할 때 유리합니다. 실무에서 HEX RGB변환이 반복적으로 필요한 이유가 바로 이 역할 분담 때문입니다.
HEX RGB변환 3단계 계산법
#2E86DE를 예로 들어 손으로 계산하는 과정을 따라가 보겠습니다.
- 샵 기호를 떼고 두 자리씩 끊습니다. 2E86DE는 2E / 86 / DE 세 덩어리가 되며, 순서대로 빨강, 초록, 파랑입니다.
- 각 덩어리를 10진수로 바꿉니다. 앞자리에 16을 곱하고 뒷자리를 더하면 됩니다. A는 10, B는 11, C는 12, D는 13, E는 14, F는 15로 계산합니다.
- rgb() 형식으로 조립합니다. 세 값을 쉼표로 이어 붙이면 끝입니다.
실제 계산을 적어 보면 다음과 같습니다. 2E는 2 곱하기 16에 14를 더해 46, 86은 8 곱하기 16에 6을 더해 134, DE는 13 곱하기 16에 14를 더해 222가 됩니다. 따라서 #2E86DE는 rgb(46, 134, 222)입니다.
세 자리 축약형도 자주 보입니다. #1AB처럼 적힌 코드는 각 자리를 두 번씩 반복해 #11AABB로 펼친 뒤 계산하며, 결과는 rgb(17, 170, 187)입니다. #FFF가 흰색이고 #000이 검정인 이유도 같은 규칙 때문입니다.
변환할 색상이 몇 개 되지 않는다면 직접 계산해도 되지만, 팔레트 전체를 옮기거나 투명도까지 함께 조정해야 한다면 색상 변환기로 처리하는 편이 오차 없이 빠릅니다. 특히 반올림이 개입하는 알파 값 계산에서 실수를 줄일 수 있습니다.
RGB에서 HEX로 되돌리는 방법
반대 방향은 각 채널 값을 16으로 나누는 과정입니다. 몫이 앞자리, 나머지가 뒷자리가 되고 10 이상은 A부터 F로 바꿔 적습니다. 46을 16으로 나누면 몫 2에 나머지 14이므로 2E, 134는 몫 8에 나머지 6이므로 86, 222는 몫 13에 나머지 14이므로 DE가 됩니다. 다시 #2E86DE로 돌아왔습니다.
자주 쓰이는 색상은 아예 외워 두면 변환 과정을 건너뛸 수 있습니다.
| 색상 | HEX | RGB | 주요 용도 |
|---|---|---|---|
| 흰색 | #FFFFFF | rgb(255, 255, 255) | 배경, 카드 |
| 검정 | #000000 | rgb(0, 0, 0) | 그림자 기준색 |
| 중간 회색 | #808080 | rgb(128, 128, 128) | 보조 텍스트 |
| 순수 빨강 | #FF0000 | rgb(255, 0, 0) | 오류 표시 |
| 순수 초록 | #00FF00 | rgb(0, 255, 0) | 성공 표시 |
| 순수 파랑 | #0000FF | rgb(0, 0, 255) | 링크 기본값 |
| 연회색 | #F5F5F5 | rgb(245, 245, 245) | 섹션 구분 배경 |
투명도가 들어간 8자리 HEX 다루기
CSS Color Module Level 4부터 HEX 코드 뒤에 두 자리를 더 붙여 투명도를 표현할 수 있게 되었습니다. #RRGGBBAA 형식이며 마지막 두 자리가 알파 채널입니다. 0에서 255까지의 값이 투명도 0퍼센트에서 100퍼센트에 대응합니다.
퍼센트를 16진수로 바꾸려면 원하는 비율에 255를 곱한 뒤 반올림하고, 그 값을 다시 16진수로 적으면 됩니다. 80퍼센트는 204이므로 CC, 50퍼센트는 128이므로 80, 25퍼센트는 64이므로 40, 10퍼센트는 26이므로 1A입니다. 즉 #2E86DECC는 rgba(46, 134, 222, 0.8)과 같은 색입니다.
최신 CSS에서는 rgb(46 134 222 / 80%)처럼 쉼표 없이 공백으로 구분하고 슬래시 뒤에 투명도를 적는 문법도 함께 쓰입니다. rgba()라는 별도 함수를 쓰지 않아도 되므로 코드가 간결해집니다.
변환할 때 자주 생기는 실수
계산 자체는 단순하지만 실무에서는 다음과 같은 지점에서 값이 어긋나는 일이 많습니다.
- 채널 순서 혼동: HEX는 항상 빨강, 초록, 파랑 순서입니다. 일부 디자인 툴이나 안드로이드 리소스는 ARGB 순서로 알파를 앞에 두므로 8자리 코드를 옮길 때 특히 조심해야 합니다.
- 반올림 누적: 투명도를 퍼센트에서 16진수로 바꾸고 다시 퍼센트로 되돌리면 소수점 이하가 미세하게 달라집니다. 디자인 토큰에는 원본 퍼센트 값을 함께 기록해 두는 편이 안전합니다.
- 투명도와 밝기 혼동: 흰 배경 위 50퍼센트 투명한 파랑과 밝기를 50퍼센트 올린 파랑은 화면에서 비슷해 보여도 다른 배경 위에서는 전혀 다르게 보입니다.
- 색 공간 차이: 인쇄용 CMYK나 HSL에서 넘어온 값은 변환 과정에서 실제로 표현 가능한 범위 밖으로 나갈 수 있습니다. 이 경우에는 수치 변환보다 눈으로 확인하는 과정이 필요합니다.
협업 규모가 커지면 개별 변환보다 관리 체계가 중요해집니다. 브랜드 색상을 CSS 변수로 한곳에 정의하고 각 컴포넌트는 그 변수를 참조하도록 만들어 두면, 색을 바꿔야 할 때 HEX RGB변환을 반복할 일 자체가 사라집니다. 변수 이름도 blue처럼 색 자체를 가리키기보다 primary나 surface처럼 역할을 가리키도록 지으면 다크 모드 대응까지 한결 수월해집니다.