HEX → HSL 변환기
HEX 값을 입력하면 HSL 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
HEX를 먼저 RGB로 바꾼 뒤 색상(0~360°)·채도(%)·명도(%)로 변환합니다. 가장 큰 채널과 가장 작은 채널의 차이가 채도를, 두 값의 평균이 명도를 결정합니다.
HEX
HEX 는 RGB 와 똑같은 빨강·초록·파랑 세 값을 16진수로 적은 것뿐입니다. 채널 하나가 두 글자로 떨어져서 짧고 헷갈리지 않기 때문에 CSS·디자인 도구·설정 파일 어디서나 쓰입니다. 대소문자는 상관없고, #abc 는 #aabbcc 의 줄임입니다. 여덟 자리로 쓰면 마지막 두 자리가 투명도라서 #FF000080 은 반투명 빨강이 됩니다.
HSL
HSL 은 같은 색을 사람이 조절할 수 있는 축으로 다시 배치한 것입니다. 색상은 0~360° 각도, 채도와 명도는 백분율입니다. 같은 색의 밝은 버전이 필요하면 명도만 올리고 나머지는 그대로 두면 됩니다. 다만 여기서 말하는 명도는 계산상의 값이지 눈이 느끼는 밝기가 아닙니다. 명도 50% 의 노랑은 명도 50% 의 파랑보다 훨씬 밝아 보입니다.
HEX → HSL 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
두 자리씩 끊기
#FF6347 → FF · 63 · 47 -
16진수를 10진수로
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
0~1 로 정규화
R 1 G 0.388 B 0.278 -
최대·최소 채널
max 1 min 0.278 max−min 0.722 -
명도
L = (max+min)/2 = 0.639 = 63.9% -
채도
S = (max−min)/(1−|2L−1|) = 100% -
색상각
H = 9.1° -
결과
hsl(9, 100%, 64%)
HEX → HSL 변환 예시
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 |
hsl(0, 100%, 50%) |
| Tomato | #FF6347 |
hsl(9, 100%, 64%) |
| Orange | #FFA500 |
hsl(39, 100%, 50%) |
| Gold | #FFD700 |
hsl(51, 100%, 50%) |
| Limegreen | #32CD32 |
hsl(120, 61%, 50%) |
| Teal | #008080 |
hsl(180, 100%, 25%) |
| Dodgerblue | #1E90FF |
hsl(210, 100%, 56%) |
| Royalblue | #4169E1 |
hsl(225, 73%, 57%) |
| Blueviolet | #8A2BE2 |
hsl(271, 76%, 53%) |
| Hotpink | #FF69B4 |
hsl(330, 100%, 71%) |
자주 묻는 것
회색인데 색상 값이 이상하게 나오는 이유는?
회색은 두드러지는 채널이 없어서 색상 각도가 정의되지 않고, 관례적으로 0 으로 적습니다. 채도가 0 이라 어떤 색상 값이 와도 결과가 같습니다. 자리를 채우려고 있는 숫자이지 의미가 있는 값이 아닙니다.
HSL 값을 반올림해서 써도 되나요?
색상을 정수 각도로 반올림하는 것은 안전합니다. 채도·명도를 정수 백분율로 반올림하면 색이 한두 단계 밀릴 수 있고, 다시 HEX 로 되돌려 비교하면 그 차이가 드러납니다.
HSL 의 명도가 명암비 검사에서 쓰는 밝기와 같은 건가요?
다릅니다. 명암비는 상대 휘도를 쓰는데, 초록에 훨씬 큰 가중치를 둡니다. HSL 명도가 50% 여도 흰 배경에서 명암비를 통과하지 못할 수 있습니다.