최종 업데이트: 2026-06-23

색상 변환 (HEX, RGB, HSL)

색상 변환기는 하나의 색상을 웹에서 가장 많이 사용하는 세 가지 표기, 즉 HEX, RGB, HSL 사이에서 변환합니다. 세 형식 모두 동일한 색상을 서로 다른 방식으로 나타내며, 프런트엔드 개발자와 디자이너, 스타일시트를 편집하는 모든 사람은 디자인 도구의 HEX 코드를 RGB 함수에 붙여 넣거나, HSL에서 색상을 조정하는 등 형식 간 변환이 자주 필요합니다.

색상을 표현하는 세 가지 방법

RGB는 빨강, 초록, 파랑 빛의 혼합량으로 색상을 정의하며, 각 채널은 0에서 255 사이의 정수입니다. HEX는 동일한 세 채널을 16진수로 표현한 것으로, 채널당 2자리 16진수를 사용하여 #3B82F6과 같은 6자리 코드를 만듭니다. 두 형식 모두 채널당 동일한 8비트를 저장하므로 HEX와 RGB 사이의 변환은 정확하며 정보 손실이 없습니다.

HSL은 다른 관점으로 접근합니다. 원색을 혼합하는 대신 색상(Hue)(색상환에서 0에서 360도까지의 각도), 채도(Saturation)(0에서 100퍼센트, 회색에서 선명한 색상), 명도(Lightness)(0에서 100퍼센트, 검정에서 순수 색상을 거쳐 흰색까지)로 색상을 표현합니다. HSL은 "조금 더 밝고 채도가 낮은 파랑"과 같이 사람이 색상을 표현하는 방식에 더 가깝기 때문에 색상 조정에 편리합니다.

변환 방법

HEX 코드를 RGB로 분리하는 것은 자릿수 산술입니다. 두 자리 16진수 쌍을 각각 00에서 FF까지, 즉 0에서 255 사이의 숫자로 읽으면 됩니다. RGB를 HSL로 변환할 때는 먼저 채널 값을 단위 범위로 스케일하고, 가장 큰 채널과 가장 작은 채널의 중간값으로 명도를, 두 채널의 차이로 채도를, 가장 큰 채널이 무엇인지로 색상을 도출합니다.

계산 예시

#3B82F6을 변환합니다. 세 쌍은 3B, 82, F6으로 각각 59, 130, 246에 해당하므로 rgb(59, 130, 246)입니다. 각 채널을 단위 범위로 스케일하면 대략 0.231, 0.510, 0.965가 됩니다. 가장 큰 채널은 파랑이고 가장 작은 채널은 빨강이므로 다음과 같습니다.

색상각은 약 217도이므로 결과는 hsl(217, 91%, 60%)입니다.

RGB는 256개의 이산 값을 저장하고 HSL은 정수 각도와 퍼센트로 반올림하므로, 왕복 변환 시 값이 한 단계 이동할 수 있습니다. 육안으로는 구분되지 않지만 코드를 비교할 때 알아 두면 유용합니다. HEX 코드 뒤의 16진수 산술을 탐색하려면 진법 변환기를 참조하십시오.