HEX to RGB 변환 방법 총정리 - 색상 코드 원리부터 계산 공식, 무료 도구까지 한번에
디자인 시안의 HEX 코드를 CSS용 RGB 값으로 바꾸는 계산 공식과 브라우저 개발자 도구 활용법, 설치 없이 쓰는 무료 변환 도구까지 실무에서 바로 써먹을 수 있게 정리했습니다.
디자이너에게 받은 시안에는 #3498DB라고 적혀 있는데, 작업 중인 코드에는 rgb 값이 필요했던 경험 한 번쯤 있으실 겁니다. 색상 하나 바꾸려고 변환 사이트를 검색하다 보면 작업 흐름이 끊기고, 급한 마음에 눈대중으로 비슷한 값을 넣었다가 시안과 미묘하게 다른 색이 나오기도 합니다. HEX to RGB 변환은 원리만 알면 암산으로도 가능할 만큼 단순합니다. 이 글에서 변환 공식과 실무에서 시간을 아끼는 도구 활용법을 함께 정리합니다.
HEX와 RGB 색상 코드의 기본 개념
두 표기법은 완전히 같은 색을 다른 방식으로 적은 것입니다. 표현 가능한 색상 수도 256 x 256 x 256, 약 1,677만 가지로 동일합니다.
HEX 코드의 구조
HEX는 샵(#) 뒤에 16진수 6자리를 붙인 표기법입니다. 두 자리씩 끊어서 앞에서부터 빨강(R), 초록(G), 파랑(B)을 나타냅니다. 각 자리는 00부터 FF까지, 10진수로 바꾸면 0부터 255까지의 값을 가집니다. 예를 들어 #FF5733에서 FF는 빨강, 57은 초록, 33은 파랑의 양입니다.
RGB 표기법의 구조
RGB는 rgb(255, 87, 51)처럼 10진수 세 개를 괄호 안에 나열합니다. 사람이 값의 크기를 직관적으로 읽기 쉽고, 뒤에서 다룰 투명도(알파값) 표현으로 확장하기도 편합니다.
- HEX가 편한 경우: 색상 값을 복사해서 붙여넣을 때, 코드를 짧게 유지하고 싶을 때
- RGB가 편한 경우: 투명도를 함께 지정할 때, 자바스크립트로 색상 값을 계산할 때
- 결과는 동일: 어느 쪽을 쓰든 브라우저가 렌더링하는 색은 같습니다
HEX to RGB 변환 원리와 직접 계산법
변환의 핵심은 16진수를 10진수로 바꾸는 것입니다. 16진수는 0부터 9까지의 숫자에 A(10), B(11), C(12), D(13), E(14), F(15)를 더해 한 자리에 16가지 값을 표현합니다. 두 자리 16진수를 10진수로 바꾸는 공식은 다음과 같습니다.
(첫째 자리 값 x 16) + 둘째 자리 값
#FF5733을 실제로 계산해 보면 이렇게 됩니다.
- FF: (15 x 16) + 15 = 255 (빨강)
- 57: (5 x 16) + 7 = 87 (초록)
- 33: (3 x 16) + 3 = 51 (파랑)
따라서 #FF5733은 rgb(255, 87, 51)이 됩니다. 반대로 RGB를 HEX로 바꿀 때는 각 값을 16으로 나눈 몫과 나머지를 16진수 자리로 적으면 됩니다.
변환 사이트에 의존하기 전에 16진수와 10진수의 관계 하나만 이해해 두면, 색상 코드를 보는 순간 대략 어떤 색인지 감이 잡히고 어떤 도구를 쓰든 결과를 검증할 수 있게 됩니다. 도구는 속도를 높여줄 뿐, 원리는 여러분의 실력이 됩니다.
자주 쓰는 색상 HEX RGB 대응표
실무에서 자주 등장하는 기본 색상의 대응 값입니다. 자주 쓰는 값은 자연스럽게 외워지니 참고용으로 활용하세요.
| 색상 | HEX | RGB |
|---|---|---|
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 검정 | #000000 | rgb(0, 0, 0) |
| 빨강 | #FF0000 | rgb(255, 0, 0) |
| 초록 | #008000 | rgb(0, 128, 0) |
| 파랑 | #0000FF | rgb(0, 0, 255) |
| 주황 | #FFA500 | rgb(255, 165, 0) |
| 회색 | #808080 | rgb(128, 128, 128) |
무료 변환 도구와 개발자 도구 활용법
브라우저 개발자 도구
크롬에서 F12를 눌러 개발자 도구를 열고 요소의 스타일에서 색상 값 왼쪽의 작은 색상 칩을 클릭하면 컬러 피커가 열립니다. 여기서 Shift 키를 누른 채 색상 칩을 클릭하면 HEX, RGB, HSL 표기가 순서대로 전환됩니다. 이미 적용된 색을 확인하면서 바로 변환할 수 있어 웹 작업에서 가장 빠른 방법입니다.
디자인 툴에서 바로 확인
피그마는 우측 색상 패널에서 표기 형식을 HEX, RGB, HSL 등으로 전환할 수 있고, 포토샵도 색상 피커 창에서 HEX와 RGB 값을 동시에 보여줍니다. 시안을 받았다면 디자인 툴 안에서 원하는 형식으로 복사하는 것이 정확합니다.
온라인 변환 사이트
설치 없이 브라우저에서 바로 쓰는 웹 유틸리티도 좋은 선택입니다. 개발하다 보면 색상 변환처럼 간단하지만 자주 필요한 작업이 많은데, 예를 들어 인증 헤더나 데이터 전송 과정에서 문자열 인코딩이 필요할 때는 Base64 인코더 같은 웹 도구로 즉시 처리할 수 있습니다. 프로젝트 마감일까지 남은 일수를 확인할 때 D-Day 계산기를 쓰는 것처럼, 자주 쓰는 브라우저 기반 도구를 즐겨찾기에 모아 두면 작업 흐름이 끊기지 않습니다.
CSS에서 HEX와 RGB 제대로 활용하기
변환을 알았다면 이제 상황에 맞게 골라 쓰는 것이 중요합니다. 투명도가 필요하면 rgba(255, 87, 51, 0.5)처럼 네 번째 값으로 알파를 지정합니다. 0은 완전 투명, 1은 완전 불투명입니다.
최신 브라우저는 8자리 HEX도 지원합니다. #FF573380처럼 마지막 두 자리가 투명도를 나타내며, 80은 10진수로 128이므로 약 50% 불투명도입니다. rgb(255 87 51 / 50%)처럼 쉼표 없이 슬래시로 알파를 적는 최신 문법도 모든 주요 브라우저에서 동작합니다.
- 단순 배경색, 글자색: 짧고 복사하기 쉬운 HEX
- 반투명 오버레이, 그림자: 알파값이 필요한 rgba 또는 8자리 HEX
- 자바스크립트로 색상을 동적으로 계산: 숫자 연산이 쉬운 RGB
오늘 바로 적용할 수 있는 정리
HEX to RGB 변환은 두 자리 16진수를 (첫째 자리 x 16) + 둘째 자리로 계산하는 것이 전부입니다. 원리를 알면 도구가 내놓는 값을 검증할 수 있고, 급할 때는 암산도 가능합니다.
지금 바로 두 가지만 해보세요. 첫째, 자주 쓰는 브랜드 색상 하나를 골라 손으로 직접 RGB로 변환해 보면서 공식을 몸에 익히세요. 둘째, 크롬 개발자 도구에서 Shift 클릭으로 색상 표기를 전환하는 단축 동작을 연습해 두세요. 이 두 가지면 색상 코드 때문에 검색창을 여는 일이 눈에 띄게 줄어들 겁니다.
