웹·디자인 작업에서 색을 표현하는 세 가지 방식 HEX·RGB·HSL이 각각 무엇을 뜻하고 어떻게 서로 변환되는지 정리했습니다.
HEX·RGB·HSL이란
HEX(16진수 코드)는 #1e33b0처럼 # 뒤에 6자리 16진수를 붙여 색을 표현합니다. CSS·디자인 툴에서 가장 흔히 쓰입니다. RGB는 빨강(Red)·초록(Green)·파랑(Blue) 세 빛의 양을 각각 0~255 숫자로 나타냅니다. HSL은 색상(Hue, 0~360도)·채도(Saturation, 0~100%)·명도(Lightness, 0~100%)로 표현해, "이 색보다 더 밝게" "채도를 낮춰서"처럼 색을 직관적으로 조절할 때 편합니다.
HEX ↔ RGB 변환
HEX 6자리는 2자리씩 R·G·B를 나타냅니다. 각 2자리 16진수를 10진수로 바꾸면 RGB 값이 됩니다.
#1e33b0 → 1e=30, 33=51, b0=176 → RGB(30, 51, 176)
반대로 RGB → HEX는 각 값(0~255)을 2자리 16진수로 바꿔 이어붙이면 됩니다. 16진수 한 자리로 안 되면(예: 5 → 05) 앞에 0을 채웁니다.
RGB → HSL 변환 공식
R·G·B를 각각 255로 나눠 0~1 범위로 바꾼 뒤 계산합니다.
- 최댓값(max)과 최솟값(min)을 구합니다.
- 명도(L) = (max + min) ÷ 2
- 채도(S) = max=min이면 0, 아니면 L이 0.5보다 크면 (max−min)÷(2−max−min), 작으면 (max−min)÷(max+min)
- 색상(H)은 max가 R·G·B 중 어느 것이냐에 따라 다른 식을 쓰고, 결과를 60을 곱해 0~360도로 바꿉니다.
예를 들어 #1e33b0(RGB 30, 51, 176)을 계산하면 HSL(231°, 71%, 40%)이 됩니다. 계산이 복잡해 보이지만, 실제로는 색상 코드 변환기에 값만 넣으면 바로 나옵니다.
언제 어떤 방식을 쓰나요
디자인 시안을 그대로 코드에 옮길 때는 HEX가 짧고 흔해 편합니다. 투명도(alpha)까지 함께 다룰 때는 RGB(rgba())가 직관적입니다. 같은 색조를 유지하면서 밝기·채도만 조절하는 다크모드·호버 색상 같은 작업에는 HSL이 가장 편리합니다.
바로 확인해 보기
색상 코드 변환기에 HEX·RGB·HSL 중 아무 값이나 넣으면 나머지 두 형식과 색상 미리보기까지 바로 보여줍니다. 모든 계산은 브라우저 안에서만 이뤄지고 서버로 전송되지 않습니다.