온라인 Hex→HSL 색 변환
Hex를 HSL/HSLA로 변환. 짧은 Hex와 알파 지원. 라이브 미리보기 무료 색 도구。브라우저에서만 처리되며 파일은 기기에 남습니다. 가입 불필요.
HSL은 색상·채도·명도를 나눠 「조금 어둡게」가 hex 자릿수 손보기보다 쉬운 경우가 많습니다.
알파가 있는 8자리 hex는 hsla; 불투명이면 hsl.
디자인 앱과의 미세한 차이는 색공간 차이 — 미리보기 스와치를 믿으세요.
변환 방법
- hex 입력
- HSL 출력과 스와치 확인
- CSS에 복사
HSL이 유용한 점
- CSS 변수로 명암 변형을 만듦.
- 디자인 핸드오프 hex와 코드를 맞춤.
- 즉시 미리보기로 시행착오를 줄임.
시나리오
- 브랜드 hex → hsl 커스텀 속성
- 명도 시프트로 버튼 hover
- 8자리 hex의 알파 확인
팁
- 입력의 `#`는 선택.
- 짧은 `#abc`는 `#aabbcc`로 확장.
- 알파 필요에 따라 hsl vs hsla 복사.
예
| 입력 | 출력 | 설명 |
|---|---|---|
| #FF5733 | hsl(...) | 불투명 |
| #FF573380 | hsla(...) | 반투명 |
Hex→HSL FAQ
- RGB 변환과의 관계는?
- 사이트에 hex↔RGB도 있습니다. 지각적 명암 조정에는 HSL이 종종 낫습니다.
- Figma와 안 맞나요?
- 반올림과 색역이 다릅니다 — 대상 브라우저로 판단하세요.