RGB → HEX·HSL 색상 변환기

16진수 한 자리는 0~15까지만 표현하지만 RGB 채널은 255까지 필요합니다. 16진수 두 자리면 정확히 0~255(16×16=256)를 표현할 수 있어, 색상 코드의 기본형은 빨강·초록·파랑 각 2자리씩 총 6자리입니다. 아래에서 다루는 3자리 축약형은 두 자리가 같은 숫자로 반복될 때만 쓸 수 있는 예외이고, 투명도를 붙이는 8자리(#RRGGBBAA) 표기도 있습니다.

rgb(79, 70, 229)를 예로 들면, 각 채널을 16으로 나눈 몫과 나머지로 16진수 두 자리를 만듭니다. R=79는 79를 16으로 나누면 몫 4, 나머지 15이므로 4F, G=70은 몫 4, 나머지 6이므로 46, B=229는 몫 14, 나머지 5이므로 E5입니다. 16진수에서 10부터 15까지는 A부터 F로 표기하므로 나머지 15는 F, 나머지 14는 E가 됩니다. 세 결과를 순서대로 이어 붙이면 #4F46E5가 되며, 이는 이 계산기가 실제로 출력하는 값과 같습니다.

같은 rgb(79, 70, 229)로 HSL을 계산해 보겠습니다. 먼저 각 채널을 255로 나눠 0에서 1 사이 값으로 바꾸면 R≈0.310, G≈0.275, B≈0.898입니다. 셋 중 최댓값은 B, 최솟값은 G이므로 명도는 L = (0.898 + 0.275) ÷ 2 ≈ 0.586, 반올림하면 59%입니다. 명도가 0.5보다 크므로 채도는 S = (최댓값−최솟값) ÷ (2−최댓값−최솟값) ≈ 0.624 ÷ 0.827 ≈ 0.754, 반올림하면 75%입니다. 색상은 최댓값 채널이 파랑(B)이므로 H = 60 × ((R−G)÷(최댓값−최솟값) + 4) ≈ 243도가 됩니다. 정리하면 hsl(243, 75%, 59%)이며, 이 계산기의 실제 출력과 일치합니다.

R, G, B가 모두 같은 값이면(검정·흰색뿐 아니라 rgb(128, 128, 128) 같은 중간 회색도 포함) 최댓값과 최솟값이 같아져 색상(H) 계산식의 분모(최댓값−최솟값)가 0이 됩니다. 채도는 중간 회색이라면 0으로 정상 정의되지만(검정·흰색에서만 0÷0이 됩니다), 색상은 나눗셈이 성립하지 않아 수학적으로 정의할 근거가 사라지고, 이 계산기를 포함한 대부분의 구현은 관례적으로 이런 무채색의 색상값을 0으로 표시합니다. 즉 hsl(0, 0%, 50%)의 '0도'는 실제 색상 정보가 아니라 정의되지 않음을 나타내는 관례값입니다.

이 계산기의 RGB는 화면 표시를 전제로 한 sRGB 색공간(IEC 61966-2-1:1999) 기준입니다. 빛을 더할수록 밝아지는 가산 혼합이라 R=G=B=255가 흰색이 됩니다. 반면 인쇄에 쓰이는 CMYK는 잉크를 더할수록 어두워지는 감산 혼합이며 표현 가능한 색의 범위(색역)도 sRGB보다 좁습니다. 화면에서 확인한 rgb(79, 70, 229)를 그대로 인쇄하면 용지·잉크·변환 프로파일에 따라 실제로 보이는 색이 달라질 수 있어, 인쇄물 색 지정에는 이 값을 그대로 쓰지 않는 것이 안전합니다. HSL 변환 수식은 CSS Color Module Level 4(W3C) 명세를 따르며, 출처는 두 표준 문서입니다.

이 계산기는 H·S·L을 정수로 반올림해 보여줍니다. rgb(79, 70, 229)의 정확한 값은 h≈243.40도, s≈75.36%, l≈58.63%이지만 화면에는 반올림된 243도·75%·59%로 표시됩니다. 반올림된 값을 다시 RGB로 역변환하면 소수점 정보가 사라진 만큼 원래 채널과 어긋난 값이 나오는데, 그 폭이 생각보다 큽니다. 이 페이지가 예로 드는 rgb(79, 70, 229)조차 hsl(243, 75%, 59%)를 거쳐 되돌리면 rgb(80, 72, 229)가 되어 초록 채널이 2 벌어집니다. 24비트 색 16,777,216가지를 전부 왕복시켜 보면 원래 값 그대로 돌아오는 것은 10.6%뿐이고, 35.0%는 어느 한 채널이 2 이상 어긋나며 최대 5까지 벌어집니다(rgb(2, 228, 230) → hsl(181, 98%, 45%) → rgb(2, 223, 227)). 즉 RGB에서 HSL을 거쳐 다시 RGB로 왕복해도 원래 값으로 정확히 돌아온다는 보장은 없습니다.

CSS에서는 각 자리가 같은 숫자 쌍으로 반복될 때만 6자리 HEX를 3자리로 줄여 쓸 수 있습니다(예: #FF0000 → #F00, #112233 → #123). rgb(79, 70, 229)의 결과인 #4F46E5는 4F·46·E5 세 쌍 중 어느 것도 같은 숫자가 반복되지 않으므로 축약형으로 쓸 수 없고, 항상 6자리 그대로 적어야 합니다. 채널 값이 17의 배수(0, 17, 34…255)로 딱 맞아떨어질 때만 두 자리가 반복돼 축약이 가능해집니다.

CSS Color Module Level 3까지는 hsl(243, 75%, 59%)처럼 쉼표로 값을 구분했습니다. Level 4부터는 hsl(243 75% 59%)처럼 공백으로 구분하고, 필요하면 슬래시로 투명도를 더하는 hsl(243 75% 59% / 0.5) 같은 표기도 허용합니다. 두 표기 모두 유효한 CSS이지만, 오래된 브라우저 호환을 우선한다면 쉼표 표기가 더 안전합니다.

R·G·B 입력칸에 79.6처럼 소수를 넣으면, 이 계산기는 계산 전에 먼저 정수로 반올림합니다(79.6 → 80). 그다음에야 0~255 범위로 clamp하고 HEX·HSL 변환을 진행합니다. 그래서 79.4와 79.6을 각각 넣으면 반올림 단계에서 이미 79와 80으로 갈라져, 최종 HEX 코드의 해당 자리가 달라질 수 있습니다.

이 계산기의 모든 변환은 웹 표준 색 공간인 sRGB를 전제로 합니다. 같은 HEX 값이라도 Display P3처럼 색역이 넓은 공간에서 해석하면 화면에 나타나는 색이 달라지므로, 넓은 색역을 다루는 작업에서는 색 공간을 명시한 표기를 쓰는 편이 안전합니다. 또한 위에서 설명한 CSS 색상 표기법은 명세가 개정되면서 문법이 넓어져 왔으므로, 이 페이지 설명의 기준일은 2026년이며 최신 문법은 사용하는 브라우저의 지원 범위를 함께 확인하세요. 변환 공식 자체(HEX·RGB·HSL 사이의 수학적 관계)는 sRGB 정의에 묶여 있어 바뀌지 않습니다. 근거: HEX는 각 채널의 0~255 값을 두 자리 16진수로 적은 것이고, HSL은 같은 RGB 값을 원기둥 좌표로 다시 표현한 것이라 두 표기는 서로 손실 없이 오갈 수 있습니다. 다만 정수로 반올림하는 과정에서 미세한 차이가 생길 수 있다는 점은 위 블록에서 설명했습니다.