HEX ↔ RGB 변환기

HEX↔RGB 변환기는 웹·디자인에서 사용되는 두 가지 색상 코드 형식을 서로 변환해 주는 도구입니다. CSS에서는 #1a2b3c 같은 HEX 코드를 주로 쓰고, 포토샵·피그마 등 디자인 도구나 일부 프레임워크에서는 rgb(26, 43, 60) 형식을 요구하는 경우가 많아, 두 형식을 오가는 일이 자주 생깁니다. 수동으로 16진수를 10진수로 계산하는 번거로움 없이 바로 결과를 얻을 수 있습니다.

사용 방법

HEX → RGB 방향으로 변환할 때는 입력창에 색상 코드를 붙여넣습니다. # 기호 포함 여부에 관계없이 인식됩니다. 6자리 코드(#RRGGBB)와 3자리 축약형(#RGB) 모두 지원합니다. RGB → HEX 방향은 R·G·B 각 채널에 0~255 범위의 숫자를 입력하면 즉시 HEX 코드로 변환됩니다. 결과 옆에 색상 미리보기 박스가 표시되어, 변환 전후에 실제 색이 맞는지 시각적으로 바로 확인할 수 있습니다.

이럴 때 유용해요

디자이너가 피그마에서 RGB 값으로 작업한 색상을 개발자에게 CSS 코드로 전달할 때 HEX로 변환해 공유하면 소통이 간편합니다. 반대로 디자인 시안의 HEX 코드를 안드로이드 앱(Color.rgb() 방식)이나 캔버스 API에 적용할 때 RGB로 바꿔야 할 때도 유용합니다. 브랜드 가이드라인 색상을 플랫폼마다 다른 형식으로 등록할 때도 매번 계산하지 않아도 됩니다. opacity(투명도)가 포함된 rgba() 형식을 사용할 때는 RGB 결과값에 alpha 값(0~1)을 직접 추가하면 됩니다.

알아두면 좋은 점

HEX 코드는 16진수(0~9, A~F)를 사용해 빨강(R)·초록(G)·파랑(B) 채널을 각 2자리씩 표현합니다. 예를 들어 #FF0000에서 FF는 255(빨강 최대), 나머지 두 쌍은 0이므로 순수 빨강입니다. 3자리 축약형 #RGB는 #RRGGBB에서 각 채널의 두 자리가 같을 때만 사용 가능합니다(#FFF = #FFFFFF, #F00 = #FF0000). CSS에서는 두 형식을 혼용할 수 있으므로 어떤 형식을 써도 렌더링 결과는 동일합니다. 색상 정확도가 중요한 인쇄물 작업에서는 RGB가 아닌 CMYK 변환이 별도로 필요하므로, 이 도구는 화면 출력 용도에 해당합니다.

자주 묻는 질문