HEX to RGB 색상 변환기

계산 입력

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

결과

RGB 색상

rgb(52, 152, 219)

from #3498DB

빨강 (R)	52
초록 (G)	152
파랑 (B)	219
정규화된 HEX	#3498DB
CSS	rgb(52, 152, 219)

HEX to RGB 변환기란?

HEX 색상 코드는 색을 6자리 16진수로 나타낸 값으로, #RRGGBB 형태로 표기합니다. 두 자리씩 짝지은 세 쌍이 각각 빨강(R), 초록(G), 파랑(B)이라는 가산 혼합 색상 채널을 나타냅니다. 이 변환기는 HEX 코드를 읽어 0부터 255 사이의 정수 세 개로 이루어진 RGB 값으로 바꿔 줍니다. RGB는 CSS와 디자인 프로그램, 대부분의 화면이 내부적으로 사용하는 형식이어서, 두 형식을 오가는 변환은 웹 개발자와 디자이너에게 매일 반복되는 작업입니다.

사용 방법

입력란에 HEX 코드를 입력하기만 하면 됩니다. 앞에 #를 붙여도 되고 생략해도 괜찮습니다. 6자리 전체 표기(#3498DB)는 물론, 3자리 축약형(#39C → #3399CC로 확장)도 모두 인식합니다. 도구가 불필요한 문자를 자동으로 정리하고 코드를 표준 형태로 다듬은 뒤, 빨강·초록·파랑 값과 실시간 색상 미리보기, 그리고 바로 붙여 넣을 수 있는 CSS 코드를 즉시 보여 줍니다.

변환 공식 알아보기

16진수는 밑이 16인 진법으로, 0~9의 숫자와 A~F의 문자를 사용합니다(A=10 … F=15). 두 자리 한 쌍은 값 = 첫째 자리 \(\times\) 16 + 둘째 자리라는 규칙으로 변환합니다. 따라서 FF = \(15 \times 16 + 15 = 255\)로 최댓값이 되고, 00 = 0으로 최솟값이 됩니다. 세 쌍은 각각 독립적으로 R, G, B 값으로 해석됩니다.

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

광고

16진수 코드를 세 쌍으로 나누고, 각 쌍을 0~255 채널 값으로 변환합니다.

예제로 풀어 보기

#3498DB를 살펴보겠습니다. 빨강 쌍 34 = \(3 \times 16 + 4 = \mathbf{52}\), 초록 쌍 98 = \(9 \times 16 + 8 = \mathbf{152}\), 파랑 쌍 DB = \(13 \times 16 + 11 = \mathbf{219}\)입니다. 결과는 rgb(52, 152, 219) — 플랫 디자인에서 즐겨 쓰는 인기 블루 색상입니다.

실제 예시: 하나의 16진수 코드를 색상 견본으로 보여주고 옆에 R, G, B 채널을 표시.

자주 묻는 질문

#FFF 같은 축약형 HEX도 입력할 수 있나요? 네, 가능합니다. 3자리 코드는 각 자리를 두 번 반복해 확장하므로, #FFF는 #FFFFFF = rgb(255, 255, 255)가 됩니다.

알파(투명도) 채널은 어떻게 처리되나요? 이 도구는 RGB 세 채널 색상을 다룹니다. 알파가 포함된 8자리 HEX는 앞 6자리만 사용해 색상으로 변환합니다.

RGB에서 HEX로 거꾸로 변환하려면? 각 채널 값을 두 자리 16진수로 표기한 뒤 # 뒤에 차례로 이어 붙이면 됩니다. 예를 들어 52, 152, 219 → 34, 98, DB → #3498DB가 됩니다.