HSL은 사람들이 색을 말하는 방식대로 색을 설명합니다: 어떤 색상(hue), 얼마나 채도(saturation), 얼마나 밝기(lightness). HEX 코드를 HSL로 바르면 밝히기, 톤 낮추기, 전체 스케일 만들기 같은 조정이 훨씬 쉬워집니다.
HEX에서 HSL로 어떻게 변환되는지
- HEX 코드를 RGB로 변환한 뒤 각 채널을 255로 나눠 0과 1 사이 값으로 만듭니다.
- 세 값 중 최댓값과 최솟값을 찾으세요. 그들의 평균이 밝기 L입니다.
- 두 값의 차이가 채도 S를 결정합니다: 밝은 색은 (2 − max − min)으로 나누고, 어두운 색은 (max + min)으로 나눕니다.
- 최댓값을 가진 채널이 색상 H를 결정합니다 — 빨강은 0°, 초록은 120°, 파랑은 240° — 나머지 두 채널이 그 구간 안에서의 정확한 위치를 정합니다.
작동 예시
HEX #2ECC71=HSL hsl(145, 63%, 49%)
수학적으로는 정확하지만 HSL 값은 보통 도(degree)와 퍼센트로 반올림해 표시합니다. 따라서 다시 변환하면 원래 RGB에서 한두 단계 차이가 날 수 있는데, 실제로는 보이지 않지만 색을 반복 변환할 경우 유의하세요.
HEX과(와) HSL 설명
HEX이(가) 무엇인가요?
HEX 코드는 앞의 # 뒤에 오는 여섯 자리 16진수로 색의 빨강, 초록, 파랑 채널을 저장합니다. 두 자리씩이 각 채널을 나타내며 00(없음)에서 FF(최대)까지 표현해 RGB와 같은 1,670만 색을 더 짧게 표기합니다. HEX는 CSS, 디자인 도구, 브랜드 가이드라인에서 기본 표기입니다.
- 구문:
- #RRGGBB
- 범위:
- 채널별 00–FF
- 적합한 용도:
- CSS, 디자인 인수인계, 브랜드 가이드라인
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
HEX to HSL 참조표
가장 흔한 CSS 색상들을 HEX에서 HSL로 변환한 표입니다.
| 색상 | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |