HSL to HEX
모든 색 형식은 같은 것을 다른 언어로 표현합니다. HEX는 스타일시트, RGB는 화면과 코드, HSL은 팔레트 구성, CMYK는 인쇄에 적합합니다. 필요한 변환을 선택해 정확한 값, 실시간 미리보기, 계산식을 확인하세요.
이 색의 모든 형식
같은 색을 HEX, RGB, HSL, CMYK로 표기합니다. 어떤 값이든 복사할 수 있습니다.
HSL → HEX 변환
HSL 값은 먼저 sRGB 삼중값(빨강·초록·파랑, 0–255)으로 정규화한 뒤 HEX로 인코딩합니다. 두 표기는 같은 픽셀을 나타내므로 보이는 색은 변하지 않습니다.
1
입력 읽기
HSL 값을 채널(16진수 쌍, 숫자, 백분율)로 나눕니다.
2
sRGB로 정규화
각 채널을 0–255로 맞춰 반올림 오차가 쌓이지 않게 합니다.
3
HEX로 인코딩
결과를 HEX 표기로 출력해 스타일시트나 디자인 도구에 붙여 넣습니다.
계산식
hsl(9, 100%, 60%) → sRGB rgb(255,87,51) → HEX #FF5733
계산 예
hsl(9, 100%, 60%) = #FF5733 = #FF5733
채널은 정수로 반올림합니다. 되돌릴 때는 같은 도구를 쓰면 오차를 줄일 수 있습니다.
HSL → HEX 대조표
같은 공식으로 변환한 대표 값.
| 입력(HSL) | 결과(HEX) | |
|---|---|---|
hsl(11, 100%, 60%) | #FF5733 | |
hsl(243, 75%, 59%) | #4F46E5 | |
hsl(145, 63%, 49%) | #2ECC71 | |
hsl(204, 70%, 53%) | #3498DB | |
hsl(6, 78%, 57%) | #E74C3C | |
hsl(172, 75%, 39%) | #19AE99 | |
hsl(283, 39%, 53%) | #9B59B6 | |
hsl(37, 90%, 51%) | #F39C12 | |
hsl(210, 29%, 29%) | #34495E | |
hsl(340, 82%, 52%) | #E91F63 | |
hsl(0, 0%, 0%) | #000000 | |
hsl(0, 0%, 100%) | #FFFFFF |
모든 변환
자주 묻는 질문
HSL을 HEX로 바꾸면 색이 달라지나요?
아니요. 두 형식은 같은 sRGB 색을 나타내며 표기만 달라집니다.
다른 변환기와 HEX 값이 다른 이유는?
반올림 차이입니다. 도구마다 반올림 단계나 백색점이 다릅니다. 이 사이트는 CSS Color 4와 D65를 따릅니다.
HEX 값을 CSS에 바로 쓸 수 있나요?
네. HEX는 CSS 표준 또는 널리 지원되는 표기라 스타일시트, canvas, 디자인 도구에서 사용할 수 있습니다.
인쇄에는 어떤 형식을 쓰나요?
인쇄는 CMYK, 화면은 RGB/HEX를 씁니다. CMYK는 근사값이므로 최종 원고는 인쇄 프로파일로 변환하세요.