HEX → RGB 색상 변환기

계산 입력

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

결과

RGB 색상

rgb(52, 152, 219)

from #3498DB

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

HEX → RGB 변환기란?

HEX → RGB 변환기는 16진수 색상 코드(CSS, HTML, 디자인 툴에서 쓰는 6자리 표기법)를 그에 대응하는 RGB 값으로 바꿔 주는 도구입니다. RGB는 색을 빨강, 초록, 파랑이라는 세 가지 채널로 표현하며, 각 채널은 0부터 255까지의 값을 가집니다. 헥스 코드는 이 세 값을 #3498DB처럼 16진수 문자열 하나에 압축해 담은 형태입니다.

사용 방법

입력란에 원하는 헥스 색상 코드를 입력하세요. 앞에 붙는 #는 넣어도 되고 생략해도 됩니다. #0AF처럼 3자리 축약형을 입력하면 자동으로 6자리 형식(#00AAFF)으로 확장됩니다. 계산 버튼을 누르면 RGB 값, 색상 미리보기, 그리고 각 채널별 값을 따로 확인할 수 있습니다.

변환 원리

6자리 헥스 코드는 두 자리씩 세 쌍으로 나뉩니다. 1~2번째 문자는 빨강, 3~4번째는 초록, 5~6번째는 파랑입니다. 각 쌍은 16진수이므로 이를 10진수로 변환합니다.

$$(R,\,G,\,B) = \left( \text{hex}_{1\text{-}2},\ \text{hex}_{3\text{-}4},\ \text{hex}_{5\text{-}6} \right)_{16}$$

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

예를 들어 FF는 \(15\times16 + 15 = 255\)로 최대 밝기를 뜻하고, 00은 0이 됩니다.

6자리 16진수 코드는 세 쌍으로 나뉘며, 각각 R, G, B의 0~255 값으로 변환됩니다.

실제 계산 예시

#3498DB를 살펴봅시다. 빨강 = 34 = \(3\times16 + 4 = 52\), 초록 = 98 = \(9\times16 + 8 = 152\), 파랑 = DB = \(13\times16 + 11 = 219\). 결과는 rgb(52, 152, 219) — 보기 좋은 중간 톤의 파란색입니다.

예: #FF8800은 RGB (255, 136, 0)으로 변환되며, 주황색 견본입니다.

자주 묻는 질문

# 기호를 꼭 넣어야 하나요? 아닙니다. 변환기가 자동으로 제거하므로 3498db와 #3498DB는 동일한 결과를 냅니다.

헥스 코드는 대소문자를 구분하나요? 구분하지 않습니다. ff와 FF는 같으며, 이 도구는 모두 대문자로 통일해 처리합니다.

3자리 코드는 어떻게 되나요? #F00 같은 축약형은 각 자리를 두 번씩 반복해 #FF0000으로 확장됩니다. 이는 rgb(255, 0, 0), 즉 순수한 빨강입니다.