온라인 HSL→Hex 색 변환
HSL/HSLA를 Hex 코드로. 라이브 미리보기. 디자이너·개발자용 무료 도구。브라우저에서만 처리되며 파일은 기기에 남습니다. 가입 불필요.
스타일은 HSL, 디자인 스펙은 hex — 이 다리가 수동 변환을 아낍니다.
투명 hsla는 알파가 중요할 때 8자리 hex; 대상이 알파 hex를 못 읽으면 opacity를 분리하세요.
변환 방법
- HSL/HSLA 붙여넣기
- 스와치 확인
- hex 복사
도움이 될 때
- CSS 변수는 HSL, 납품은 hex가 필요할 때.
- 테마 토큰에서 빠른 hex 스와치.
- 핸드오프 전 채널 실수를 잡음.
시나리오
- Tailwind 임의 HSL → 벤더용 hex
- 문서 표를 hex로 통일
팁
- 채도와 명도는 보통 퍼센트.
- 색상은 `deg` 또는 순수 숫자.
- 잘못된 구문은 오류 — 유효한 CSS로 고치세요.
예
| 입력 | 출력 | 설명 |
|---|---|---|
| hsl(9 100% 60%) | #FF5733 근처 | 현대 공백 구분 구문 |
| hsla(..., 0.5) | 8자리 hex | 알파 포함 |
HSL→Hex FAQ
- `hsl(a b c / d)` 지원?
- 흔한 현대 형태는 가능한 범위에서 파싱; 안 되면 쉼표 구문으로 돌아가세요.
- 스포이드와 조금 다른가요?
- hex 반올림 — UI 작업에서는 보통 무시할 차이입니다.