RGB는 화면에 얼마나 많은 빛을 내보낼지 알려주고, HSL은 우리가 실제로 보는 색을 알려줍니다. 세 채널을 색상(H), 채도(S), 밝기(L)로 바꾸면 수동으로 색을 조절하기 쉬워집니다.
RGB에서 HSL로 어떻게 변환되는지
- R, G, B를 255로 나눠 각 값이 0과 1 사이에 있도록 만드세요.
- 세 값의 최댓값과 최솟값을 구하세요 — 그 평균이 밝기 L입니다.
- 최댓값과 최솟값이 같으면 색은 회색입니다: 색상과 채도는 둘 다 0입니다.
- 그렇지 않다면 최댓값과 최솟값의 차이로 S를 구하고, H는 최댓값을 가진 채널에서 읽어냅니다.
작동 예시
RGB rgb(155, 89, 182)=HSL hsl(283, 39%, 53%)
원칙적으로는 정확합니다. 다만 H, S, L은 보통 반올림되어 표시되므로 다시 변환하면 한두 채널 정도 차이가 날 수 있습니다.
RGB과(와) HSL 설명
RGB이(가) 무엇인가요?
RGB는 색을 빛의 세 채널—빨강, 초록, 파랑—로 표현하며 각 채널은 0에서 255 사이 값입니다. 화면 작동 방식을 그대로 반영해 세 채널이 모두 255이면 흰색, 모두 0이면 검은색이 됩니다. 색으로 계산할 필요가 있을 때는 RGB가 적합하며, rgba()는 투명도를 추가합니다.
- 구문:
- rgb(R, G, B)
- 범위:
- 채널별 0–255
- 적합한 용도:
- 코드, 캔버스, rgba()로 투명도 처리
HSL이(가) 무엇인가요?
HSL은 색을 색상(색환상의 0–360°), 채도(얼마나 채색된지, 0–100%), 명도(밝기, 0–100%)로 나눕니다. 사람이 색을 설명하는 방식과 유사하기 때문에 HSL은 색조, 쉐이드, 일관된 팔레트를 수작업이나 코드로 만들 때 가장 다루기 쉽습니다.
- 구문:
- hsl(H, S%, L%)
- 범위:
- 0–360°, 0–100%, 0–100%
- 적합한 용도:
- 팔레트, 틴트와 쉐이드, 테마 작업
RGB to HSL 참조표
가장 흔한 CSS 색상들을 RGB에서 HSL로 변환한 표입니다.
| 색상 | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |