RGB → HSL 변환기
RGB 값을 입력하면 HSL 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
세 채널을 0~1로 정규화하고 최대·최소값을 구합니다. 명도는 (최대+최소)/2, 채도는 그 차이를 명도로 보정한 값, 색상은 어느 채널이 최대인지로 결정됩니다.
RGB
RGB 는 화면이 색을 만드는 방식 그대로입니다. 빛 세 개를 더하며, 각각 0~255 입니다. 셋 다 0 이면 검정, 셋 다 255 면 흰색입니다. 하드웨어와 같은 구조라 정확하고 손실이 없지만, 사람이 다루기는 불편합니다. "조금만 더 따뜻하게" 하려면 두세 숫자를 동시에 바꿔야 하는데 어느 쪽으로 가야 할지가 눈에 보이지 않습니다.
HSL
HSL 은 같은 색을 사람이 조절할 수 있는 축으로 다시 배치한 것입니다. 색상은 0~360° 각도, 채도와 명도는 백분율입니다. 같은 색의 밝은 버전이 필요하면 명도만 올리고 나머지는 그대로 두면 됩니다. 다만 여기서 말하는 명도는 계산상의 값이지 눈이 느끼는 밝기가 아닙니다. 명도 50% 의 노랑은 명도 50% 의 파랑보다 훨씬 밝아 보입니다.
RGB → HSL 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
0~1 로 정규화
R 1 G 0.388 B 0.278 -
최대·최소 채널
max 1 min 0.278 max−min 0.722 -
명도
L = (max+min)/2 = 0.639 = 63.9% -
채도
S = (max−min)/(1−|2L−1|) = 100% -
색상각
H = 9.1° -
결과
hsl(9, 100%, 64%)
RGB → HSL 변환 예시
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
| Tomato | rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
| Orange | rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
| Gold | rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
| Limegreen | rgb(50, 205, 50) |
hsl(120, 61%, 50%) |
| Teal | rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
| Dodgerblue | rgb(30, 144, 255) |
hsl(210, 100%, 56%) |
| Royalblue | rgb(65, 105, 225) |
hsl(225, 73%, 57%) |
| Blueviolet | rgb(138, 43, 226) |
hsl(271, 76%, 53%) |
| Hotpink | rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
자주 묻는 것
색상 각도는 어느 채널이 정하나요?
가장 큰 채널입니다. 빨강이 가장 크면 0° 근처, 초록이면 120° 근처, 파랑이면 240° 근처에서 시작하고, 나머지 두 채널이 그 기준에서 각도를 끌어당깁니다.
연해 보이는 색인데 채도가 100% 로 나옵니다.
HSL 의 채도는 절대값이 아니라 명도를 기준으로 상대적으로 잽니다. 아주 밝은 색도 그 밝기 안에서는 최대로 선명할 수 있어서, 파스텔 색이 100% 로 나오는 일이 흔합니다.
명도 단계를 만들 때 이 변환을 쓰면 되나요?
되기는 하지만 OKLCH 가 더 맞습니다. HSL 명도를 일정하게 나누면 색상마다 간격이 고르지 않아 보이는데, OKLCH 명도는 같은 간격이 실제로도 고르게 보입니다.