HSL은 색을 고르기 쉬운 방식이고, RGB는 화면, 캔버스 API와 이미지 코드가 실제로 소비하는 값이야. 이 변환기는 어떤 hue, saturation, lightness 삼중값도 정확한 0–255 채널로 바꿔줘.
HSL에서 RGB로 어떻게 변환되는지
- S와 L을 분수로 바꾸고 크로마 C = (1 − |2L − 1|) × S를 계산해.
- 색상환에서 위치를 찾으려면 H를 60으로 나눠 세그먼트를 찾고, 중간값 X = C × (1 − |(H/60 mod 2) − 1|)를 계산해.
- 그 세그먼트에 따라 C, X, 0을 R, G, B 슬롯에 배정해.
- 모든 채널에 광도 오프셋 L − C/2를 더하고 255를 곱해.
작동 예시
HSL hsl(37, 90%, 51%)=RGB rgb(243, 156, 18)
결과는 최종 정수 반올림까지 정확해. 소수점 hue나 saturation 값도 지원되며 가장 가까운 RGB 삼중값으로 처리돼.
HSL과(와) RGB 설명
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
RGB이(가) 무엇인가요?
RGB는 색을 빛의 세 채널—빨강, 초록, 파랑—로 표현하며 각 채널은 0에서 255 사이 값입니다. 화면 작동 방식을 그대로 반영해 세 채널이 모두 255이면 흰색, 모두 0이면 검은색이 됩니다. 색으로 계산할 필요가 있을 때는 RGB가 적합하며, rgba()는 투명도를 추가합니다.
- 구문:
- rgb(R, G, B)
- 범위:
- 채널별 0–255
- 적합한 용도:
- 코드, 캔버스, rgba()로 투명도 처리
HSL to RGB 참조표
가장 흔한 CSS 색상들을 HSL에서 RGB로 변환한 표입니다.
| 색상 | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |