색상 변환기 (HEX↔RGB)

색상 변환기(HEX ↔ RGB)란?

웹과 디자인에서 색을 나타내는 두 가지 대표 표기법인 HEX(#RRGGBB)와 RGB(0~255)를 양방향으로 변환하고, 색상 미리보기와 HSL 값을 함께 보여주는 도구입니다. CSS·포토샵·피그마 등 도구마다 색을 다른 형식으로 요구할 때, 같은 색을 여러 표기로 빠르게 옮기는 데 쓰입니다.

HEX와 RGB의 원리

디지털 화면의 모든 색은 빨강(R)·초록(G)·파랑(B) 세 가지 빛을 섞어 만듭니다(가산 혼합). 각 색의 밝기를 0~255 256단계로 표현하므로, 표현 가능한 색은 256 × 256 × 256 = 약 1,678만 가지입니다.

• RGB: 세 채널을 10진수로 그대로 씁니다. 예) rgb(255, 136, 0)
• HEX: 같은 값을 16진수 두 자리씩 이어 붙입니다. 예) #FF8800
• 16진수는 0~9 다음 A~F(10~15)를 쓰며, 두 자리로 0~255(00~FF)를 표현합니다.

변환 방법 · 공식

HEX → RGB: 앞에서부터 두 자리씩 끊어 16진수를 10진수로 바꿉니다. 예) #FF8800 → FF=255, 88=136, 00=0 → rgb(255, 136, 0).

RGB → HEX: 각 채널을 16진수 두 자리로 바꿔 이어 붙입니다. 예) 255 → FF, 136 → 88, 0 → 00 → #FF8800. 한 자리로 떨어지는 값(예: 10진수 5 → 16진수 5)은 앞에 0을 채워 두 자리(05)로 맞춥니다.

주요 색상 변환 예시표

HSL이란? — 색을 직관적으로 조정하기

HSL은 색상(Hue, 0~360도)·채도(Saturation, 0~100%)·명도 (Lightness, 0~100%)로 색을 표현합니다. 색상환에서 각도로 색을 고르고, 채도로 선명함을, 명도로 밝기를 조절하므로 "같은 색을 조금 더 밝게" 같은 조정이 RGB보다 직관적입니다. 예를 들어 주황 #FF8800은 색상 32도·채도 100%·명도 50%이며, 명도만 70%로 올리면 더 밝은 주황이 됩니다.

어디에 쓰나요?

• 웹·CSS: color, background 속성에 HEX·rgb()·hsl() 모두 사용 가능.
• 디자인 협업: 개발자는 HEX, 디자이너 도구는 RGB/HSL을 선호해 서로 변환이 잦습니다.
• 브랜드 색 관리: 로고·가이드에 지정된 HEX를 인쇄·화면용 값으로 옮길 때.

자주 하는 실수 · 주의

• # 누락: CSS에서 HEX는 앞에 #이 필요합니다(#FF8800). 이 변환기는 #이 없어도 인식합니다.
• 자리 수 혼동: 유효한 HEX는 3자리 또는 6자리입니다. 4·5자리는 오류입니다.
• 범위 초과: RGB 채널은 255를 넘을 수 없습니다. 300 등은 255로 처리됩니다.
• 인쇄 색과 차이: 화면은 RGB(빛), 인쇄는 CMYK(잉크)라 완전히 일치하지 않을 수 있습니다.

출처 · 근거

HEX·RGB·HSL 표기법은 W3C의 CSS 색상 표준을 따릅니다. 자세한 규격은 W3C CSS Color Module 문서에서 확인할 수 있습니다. 본 변환기의 HSL 값은 반올림된 근사치입니다.