헥스를 HSL로 바꾸는 색상 변환기
CSS 헥스 색상 코드를 클릭 한 번으로 HSL(색조, 채도, 명도)로 변환합니다.
이 도구가 궁금증을 해결해 주었나요?
감사합니다 — 도구 개선에 큰 도움이 됩니다.
이 도구 사용법
- 6자리 헥스 색상 코드를 입력하세요(예: #ff5733). 앞의 #은 생략 가능합니다.
- 도구가 이를 HSL로 변환합니다: 색조는 도 단위, 채도와 명도는 퍼센트입니다.
- hsl() 문자열을 CSS나 스타일시트에 복사해 사용하세요.
헥스 색상 코드를 붙여넣으면 CSS hsl() 함수나 디자인 도구에서 사용할 수 있는 HSL 값을 얻을 수 있습니다.
공식
Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.
Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.
자주 묻는 질문
- 왜 헥스를 HSL로 변환하나요?
- 밝기나 채도를 조정할 때는 HSL이 더 직관적입니다. 색조는 고정한 채 채도와 명도만 조절해 틴트와 셰이드를 만들 수 있습니다.
- 3자리 헥스도 지원하나요?
- 네 — #abc는 #aabbcc로 처리됩니다.