HSL → HEX 변환기
HSL 값을 입력하면 HEX 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
색상·채도·명도로부터 RGB를 계산한 다음 각 채널을 16진수 두 자리로 적습니다. 명도가 50%일 때 채도가 가장 선명하게 드러납니다.
HSL
HSL 은 같은 색을 사람이 조절할 수 있는 축으로 다시 배치한 것입니다. 색상은 0~360° 각도, 채도와 명도는 백분율입니다. 같은 색의 밝은 버전이 필요하면 명도만 올리고 나머지는 그대로 두면 됩니다. 다만 여기서 말하는 명도는 계산상의 값이지 눈이 느끼는 밝기가 아닙니다. 명도 50% 의 노랑은 명도 50% 의 파랑보다 훨씬 밝아 보입니다.
HEX
HEX 는 RGB 와 똑같은 빨강·초록·파랑 세 값을 16진수로 적은 것뿐입니다. 채널 하나가 두 글자로 떨어져서 짧고 헷갈리지 않기 때문에 CSS·디자인 도구·설정 파일 어디서나 쓰입니다. 대소문자는 상관없고, #abc 는 #aabbcc 의 줄임입니다. 여덟 자리로 쓰면 마지막 두 자리가 투명도라서 #FF000080 은 반투명 빨강이 됩니다.
HSL → HEX 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
HSL 을 RGB 로
hsl(9.1 100% 63.9%) → rgb(255, 99, 71) -
10진수를 16진수로
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
이어 붙이기
# + FF + 63 + 47 = #FF6347
HSL → HEX 변환 예시
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) |
#FF0000 |
| Tomato | hsl(9, 100%, 64%) |
#FF6347 |
| Orange | hsl(39, 100%, 50%) |
#FFA500 |
| Gold | hsl(51, 100%, 50%) |
#FFD700 |
| Limegreen | hsl(120, 61%, 50%) |
#32CD32 |
| Teal | hsl(180, 100%, 25%) |
#008080 |
| Dodgerblue | hsl(210, 100%, 56%) |
#1E90FF |
| Royalblue | hsl(225, 73%, 57%) |
#4169E1 |
| Blueviolet | hsl(271, 76%, 53%) |
#8A2BE2 |
| Hotpink | hsl(330, 100%, 71%) |
#FF69B4 |
자주 묻는 것
HEX 로 바꿨다 되돌리면 HSL 값이 조금 달라집니다.
HEX 는 채널당 256 단계만 저장하므로 가장 가까운 단계로 붙습니다. 소수점이 있는 색상·채도는 단계 사이에 놓이기 때문에 되돌아올 때 조금 밀립니다.
색상 값에 360 보다 큰 수를 넣으면요?
색상은 각도라서 한 바퀴 돌아옵니다. 400° 는 40°, −20° 는 340° 입니다. 반복문에서 색상에 일정한 값을 더해 팔레트를 만들 때 편리한 성질입니다.
명도를 100% 나 0% 로 두면 색상이 무시됩니다. 오류인가요?
정상입니다. 100% 에서는 모든 채널이 최대로 올라가 흰색이 되고 0% 에서는 전부 0 이라, 색상과 채도가 영향을 줄 여지가 없습니다. 색이 보이게 하려면 대략 10~90% 사이를 쓰세요.