HEX to RGB 변환, 색상 코드 원리부터 직접 계산하는 법까지
#FF5733 같은 HEX 코드를 rgb(255, 87, 51)로 바꾸는 원리와 손으로 계산하는 법, 그리고 빠른 변환 도구까지 한 번에 정리했습니다.
방송 오버레이를 만들거나 채널 배너 색을 맞추다 보면 디자인 툴은 #FF5733으로 색을 주는데, CSS나 다른 프로그램에서는 rgb(255, 87, 51) 형식을 요구하는 경우가 자주 있습니다. 같은 색인데 표기법이 달라서 헷갈리신 적 있으실 겁니다. 이 둘의 관계만 이해하면 변환은 생각보다 단순합니다.
HEX와 RGB는 무엇이 다를까
HEX와 RGB는 똑같은 색을 다른 방식으로 적은 것일 뿐입니다. 둘 다 빨강(R), 초록(G), 파랑(B) 세 가지 빛의 세기를 조합해 색을 만듭니다.
- RGB: 각 색을 0부터 255까지의 십진수로 표기합니다. 예: rgb(255, 87, 51)
- HEX: 같은 값을 16진수 두 자리씩 묶어 #으로 시작하는 6자리로 표기합니다. 예: #FF5733
16진수는 0부터 9까지 쓰고, 10부터 15까지는 A, B, C, D, E, F로 대체합니다. 그래서 한 자리로 0~15, 두 자리로 0~255까지 표현할 수 있습니다. RGB가 0~255를 쓰는 것과 범위가 정확히 일치하는 이유입니다.
HEX는 RGB를 더 짧게 적기 위한 압축 표기일 뿐입니다. #뒤의 6자리를 두 글자씩 끊으면 그대로 R, G, B 값이 됩니다.
HEX를 RGB로 바꾸는 원리
핵심은 단 하나입니다. 6자리를 2자리씩 세 덩어리로 자른 뒤, 각 덩어리를 16진수에서 십진수로 바꾸는 것입니다.
| 구분 | HEX 조각 | 계산 | RGB 값 |
|---|---|---|---|
| 빨강(R) | FF | 15×16 + 15 | 255 |
| 초록(G) | 57 | 5×16 + 7 | 87 |
| 파랑(B) | 33 | 3×16 + 3 | 51 |
이렇게 #FF5733은 rgb(255, 87, 51)이 됩니다. 반대로 RGB를 HEX로 바꾸려면 각 값을 16으로 나눈 몫과 나머지를 16진수 기호로 적으면 됩니다.
직접 손으로 계산하는 방법
도구 없이 암산이 필요할 때가 있습니다. 두 자리 16진수를 십진수로 바꾸는 공식은 간단합니다.
계산 공식
(앞자리 값 × 16) + (뒷자리 값)
A부터 F까지의 값만 외워두면 됩니다. A는 10, B는 11, C는 12, D는 13, E는 14, F는 15입니다.
- A0 → 10×16 + 0 = 160
- 3C → 3×16 + 12 = 60
- B7 → 11×16 + 7 = 183
자주 쓰는 값 몇 개는 통째로 외워두면 빠릅니다. FF는 255, 00은 0, 80은 128입니다. 80이 중간값인 128이라는 점은 회색이나 반투명 계열을 다룰 때 유용합니다.
투명도(알파)가 붙은 8자리 HEX
최근 CSS에서는 #FF573380처럼 8자리 HEX를 쓰기도 합니다. 뒤에 붙은 두 자리가 투명도(알파 값)입니다. 이 역시 00부터 FF까지 256단계로, 00은 완전 투명, FF는 완전 불투명입니다.
| 알파 HEX | 십진수 | CSS 비율 | 의미 |
|---|---|---|---|
| FF | 255 | 1.0 | 완전 불투명 |
| BF | 191 | 약 0.75 | 살짝 비침 |
| 80 | 128 | 약 0.5 | 반투명 |
| 00 | 0 | 0.0 | 완전 투명 |
rgba 형식으로 옮길 때는 알파 값을 255로 나눠 0~1 사이 소수로 적습니다. 예를 들어 #FF573380은 rgba(255, 87, 51, 0.5)가 됩니다. 방송 화면의 채팅창 배경처럼 뒤가 살짝 비치는 효과를 줄 때 이 알파 값 조절이 핵심입니다.
빠르게 변환하는 도구와 활용
원리는 알아두되, 실무에서는 매번 손으로 계산할 필요가 없습니다. 브라우저 개발자 도구의 색상 피커, 디자인 툴의 색상 패널, 그리고 온라인 변환기로 즉시 바꿀 수 있습니다.
이런 상황에서 자주 씁니다
- 디자인 시안의 HEX 색을 CSS rgba로 옮겨 투명도를 조절할 때
- 오버레이나 위젯 색상을 방송 테마에 맞춰 미세 조정할 때
- 그래픽 툴과 코드 사이를 오가며 같은 색을 맞출 때
색상 변환처럼 자주 쓰는 소소한 변환 작업은 전용 도구를 하나씩 즐겨찾기 해두면 작업 속도가 확실히 빨라집니다. 예를 들어 로그나 데이터를 다룰 때 쓰는 타임스탬프 변환기나, 입력값 검증 패턴을 점검할 때 쓰는 정규식 테스터처럼, 반복 작업을 줄여주는 유틸리티를 곁에 두는 습관이 도움이 됩니다.
정리하면, HEX와 RGB는 같은 색의 다른 표기일 뿐이고 변환 원리는 16진수를 십진수로 바꾸는 한 단계로 끝납니다. 자주 쓰는 색 몇 개의 값은 외워두시고, 정밀한 작업은 변환 도구를 활용해 시간을 아끼시기 바랍니다.
