HEX → RGB 색상 변환기

계산 입력

HEX 색상 코드 6자리(또는 3자리) HEX 코드를 입력하세요. # 기호는 있어도 없어도 됩니다.

결과

RGB 색상

rgb(52, 152, 219)

from #3498DB

빨강 (R)	52
초록 (G)	152
파랑 (B)	219

HEX to RGB 변환기란?

HEX 색상 코드는 웹 디자인, CSS, 디지털 그래픽에서 널리 쓰이는 6자리 16진수 색상 표기법입니다. 빨강(R), 초록(G), 파랑(B) 세 채널의 밝기를 16진수(0~9와 A~F)로 나타내죠. 이 변환기는 #3498DB 같은 HEX 코드를 입력받아, 디자인 툴이나 프로그래밍 언어, 이미지 편집 프로그램에서 흔히 사용하는 RGB 값 세트로 바꿔 줍니다.

16진수 코드는 세 쌍으로 나뉘어 빨강, 초록, 파랑 값에 대응합니다.

사용 방법

위 입력란에 HEX 색상 코드를 적어 주세요. 맨 앞의 # 기호는 넣어도 되고 빼도 됩니다. 6자리 표준 코드(#RRGGBB)와 3자리 약식 코드(#RGB) 모두 지원하며, 약식 코드는 자동으로 확장됩니다(예: #0AF → #00AAFF). 결과로는 완성된 rgb(r, g, b) 문자열과 각 채널 값, 그리고 실시간 색상 미리보기가 함께 표시됩니다.

변환 공식 알아보기

각 색상 채널은 16진수 두 자리를 차지합니다. 앞 두 자리는 빨강, 가운데 두 자리는 초록, 마지막 두 자리는 파랑을 나타내며, 각 쌍을 16진수에서 10진수로 변환합니다:

$$(R,\,G,\,B) = \bigl(\text{hex}_{[1\text{-}2]},\ \text{hex}_{[3\text{-}4]},\ \text{hex}_{[5\text{-}6]}\bigr)_{16}$$ $$\text{where}\quad \left\{ \begin{aligned} R &= \text{Int}_{16}\!\left(\text{Hex}[1\text{-}2]\right) \\ G &= \text{Int}_{16}\!\left(\text{Hex}[3\text{-}4]\right) \\ B &= \text{Int}_{16}\!\left(\text{Hex}[5\text{-}6]\right) \end{aligned} \right.$$

\(R = \text{int}(\text{hex}[0:2],\ 16)\), \(G = \text{int}(\text{hex}[2:4],\ 16)\), \(B = \text{int}(\text{hex}[4:6],\ 16)\). 각 채널 값은 0(00)부터 255(FF)까지의 범위를 가집니다.

각 16진수 쌍은 16진법에서 10진수 채널 값(0~255)으로 변환됩니다.

예제로 풀어보기

#3498DB를 예로 들어 볼까요. 빨강 쌍 34는 \(3\times16 + 4 = \mathbf{52}\)입니다. 초록 쌍 98은 \(9\times16 + 8 = \mathbf{152}\)가 되고요. 파랑 쌍 DB는 \(D = 13\), \(B = 11\)이므로 \(13\times16 + 11 = \mathbf{219}\)입니다. 따라서 #3498DB = rgb(52, 152, 219)가 됩니다.

자주 묻는 질문

FFFFFF는 어떤 값으로 변환되나요? 순백색, 즉 rgb(255, 255, 255)입니다. 반대로 000000은 순흑색인 rgb(0, 0, 0)이 됩니다.

3자리 코드도 입력할 수 있나요? 네. 3자리 약식 코드는 각 자릿수를 두 번씩 반복해 확장됩니다. #F00은 #FF0000 = rgb(255, 0, 0)으로 변환되죠.

#는 꼭 넣어야 하나요? 아니요. 변환기가 맨 앞의 #를 자동으로 제거하기 때문에 #1A2B3C와 1A2B3C 둘 다 정상 작동합니다.