Hex→HSL 색 변환 온라인
`#RGB`, `#RRGGBB`, `#RRGGBBAA`를 CSS `hsl()` / `hsla()`로 바꾸고 라이브 스와치를 봅니다. 디자이너가 피커에서 hex를 복사하고 스타일에서 명도·채도를 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와 안 맞나요?
- 반올림과 색역이 다릅니다 — 대상 브라우저로 판단하세요.