HEX → HSL 변환기

HSL은 색을 색상(Hue, 색상환 위의 각도), 채도(Saturation, 얼마나 진한지), 명도(Lightness, 검정이나 흰색에 얼마나 가까운지)로 나타냅니다. HEX보다 손으로 다듬기 쉬워서, 색상은 그대로 두고 명도만 낮추면 같은 색의 어두운 버전이 됩니다. 이 변환기는 HEX와 rgb() 코드를 최신 공백 구분 문법을 포함한 hsl()과 hsla()로 바꾸고, HSL을 다시 HEX와 RGB로 바꾸며, 최대·최소값 공식의 모든 단계를 보여 줍니다.

사용 방법

1. HEX/RGB → HSL 또는 HSL → HEX/RGB를 고릅니다.
2. HEX 코드(3, 4, 6, 8자리)나 rgb(), 또는 색상·채도·명도를 입력합니다.
3. 표시할 소수 자릿수를 고릅니다.
4. 결과를 복사합니다. 계산 과정 표에서 어떻게 계산했는지 볼 수 있고, 목록을 붙여 넣으면 일괄 변환됩니다.

계산식

L = (max + min) ÷ 2 · S = Δ ÷ (1 − |2L − 1|) · H = 60° × ((G′ − B′) ÷ Δ mod 6) (R이 최대일 때), ((B′ − R′) ÷ Δ + 2) (G가 최대일 때), ((R′ − G′) ÷ Δ + 4) (B가 최대일 때)

R′, G′, B′는 채널을 255로 나눈 값이고, max, min, Δ = max − min은 이 값들에서 구합니다. 회색은 Δ = 0이어서 채도와 색상이 0입니다. 되돌릴 때는 C = (1 − |2L − 1|) × S, X = C × (1 − |(H ÷ 60) mod 2 − 1|), m = L − C ÷ 2를 씁니다.

예시

#FF6347(토마토색)에서 R′ = 1, G′ = 0.3882, B′ = 0.2784입니다. 최댓값 1, 최솟값 0.2784, Δ = 0.7216이므로 L = 0.6392, S = 0.7216 ÷ (1 − 0.2784) = 1, H = 60 × (0.1098 ÷ 0.7216) = 9.1°가 되어 hsl(9.1, 100%, 63.9%)입니다. 되돌리면 hsl(210, 50%, 40%)는 C = 0.4, X = 0.2, m = 0.2가 되고 RGB (51, 102, 153) = #336699입니다.