HEX 색상 코드 RGB 변환기

계산 입력

HEX 색상 코드 6자리 HEX 코드를 입력하세요. 맨 앞 # 기호는 있어도, 없어도 됩니다.

결과

RGB 색상

rgb(52, 152, 219)

from #3498DB

빨강	52
초록	152
파랑	219

HEX to RGB 변환이란?

HEX 색상 코드는 색을 16진수(base-16) 6자리로 나타낸 표기법으로, 웹 디자인과 CSS에서 가장 널리 쓰입니다. 예를 들어 #3498DB 같은 형태죠. 두 자리씩 끊은 각 쌍이 빨강(R)·초록(G)·파랑(B)이라는 세 가지 기본 색 채널을 나타냅니다. RGB 모델은 같은 색을 0부터 255까지의 십진수 세 개로 표현합니다. 이 변환기는 HEX 코드를 그에 대응하는 RGB 값으로 바꿔주고, 실제 색상까지 미리 보여줍니다.

사용 방법

입력란에 HEX 색상 코드를 직접 입력하거나 붙여넣으세요. 맨 앞에 # 기호를 넣어도 되고 빼도 됩니다 — 둘 다 정상 작동합니다. 일반적인 6자리 코드는 물론, 3자리 축약형(예: #0AF, 이는 #00AAFF로 확장됩니다)도 인식합니다. 계산 버튼을 누르면 빨강·초록·파랑 값과 함께 색상 미리보기가 나타납니다.

변환 공식 알아보기

변환 과정은 16진수를 그대로 읽어내는 작업입니다. 6자리 문자열을 두 자리씩 세 쌍으로 나누고, 각 쌍을 16진수로 해석합니다. 첫 번째 자릿수에 16을 곱하고 두 번째 자릿수를 더하면 됩니다. 따라서 "FF" 쌍은 \(15 \times 16 + 15 = 255\), "00" 쌍은 0이 됩니다. 일반화하면 다음과 같습니다.

$$\text{값} = (\text{첫째 자리} \times 16) + \text{둘째 자리}$$

이며, 각 자릿수는 0~15 범위를 가집니다(A~F가 10~15를 의미).

$$(R,G,B) = \big(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\big)_{16}$$

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

각 16진수 쌍은 빨강, 초록, 파랑 채널 중 하나에 대응됩니다(16진법).

예제로 풀어보기

#3498DB를 예로 들어 보겠습니다. 34, 98, DB로 나눕니다. 빨강 = \(3 \times 16 + 4 = 52\), 초록 = \(9 \times 16 + 8 = 152\), 파랑 = \(\text{D}(13) \times 16 + \text{B}(11) = 208 + 11 = 219\). 결과는 rgb(52, 152, 219) — 우리에게 익숙한 하늘색입니다.

RGB 채널이 결합되어 최종 색상 견본을 만듭니다.

자주 묻는 질문

대소문자가 영향을 주나요? 아닙니다. #abcdef와 #ABCDEF는 동일한 RGB 값을 냅니다.

3자리 코드는 어떻게 처리되나요? #F60 같은 3자리 HEX는 각 자릿수를 두 번씩 반복하는 축약형이라, 변환 전에 #FF6600으로 확장됩니다.

왜 값이 255까지만인가요? 각 채널은 16진수 두 자리를 사용하는데, 두 자리 16진수의 최댓값인 FF가 255이기 때문입니다. 즉 채널마다 0~255까지 256단계를 표현할 수 있습니다.