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