HSL로 색을 고르는 건 편한데, 스타일시트나 디자인 인계, 브랜드 문서는 여전히 HEX로 돌아갑니다. 이 변환기는 그 격차를 메우고 어떤 색상, 채도, 밝기 조합이든 6자리 코드를 제공합니다.
HSL에서 HEX로 어떻게 변환되는지
- 채도와 밝기를 분수로 바꾸세요: 60%는 0.6이 됩니다.
- 크로마 C = (1 − |2L − 1|) × S 를 계산하세요 — 이 값이 색이 회색에서 얼마나 떨어져 있는지 나타냅니다.
- 그 크로마를 이용해 빨강, 초록, 파랑 채널에 배치한 뒤 모두 L − C/2만큼 이동하세요.
- 각 채널에 255를 곱하고 반올림한 다음 두 자리의 16진수로 적으세요.
작동 예시
HSL hsl(204, 70%, 53%)=HEX #3398DB
반올림은 마지막 단계, 각 채널이 0–255의 정수로 고정될 때 한 번 일어납니다. 결과물은 입력한 HSL에 가장 가까운 HEX 코드이며 보통 디자인 도구의 결과와 동일합니다.
HSL과(와) HEX 설명
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
HEX이(가) 무엇인가요?
HEX 코드는 앞의 # 뒤에 오는 여섯 자리 16진수로 색의 빨강, 초록, 파랑 채널을 저장합니다. 두 자리씩이 각 채널을 나타내며 00(없음)에서 FF(최대)까지 표현해 RGB와 같은 1,670만 색을 더 짧게 표기합니다. HEX는 CSS, 디자인 도구, 브랜드 가이드라인에서 기본 표기입니다.
- 구문:
- #RRGGBB
- 범위:
- 채널별 00–FF
- 적합한 용도:
- CSS, 디자인 인수인계, 브랜드 가이드라인
HSL to HEX 참조표
가장 흔한 CSS 색상들을 HSL에서 HEX로 변환한 표입니다.
| 색상 | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |