RGB와 HSL의 근본적인 차이
RGB는 화면이 색을 만드는 방식을 그대로 숫자로 옮긴 모델입니다. 빨강, 초록, 파랑 빛을 각각 0~255 사이의 강도로 더하는 가산 혼합 방식이며, sRGB라는 표준 색공간을 기준으로 합니다. 반면 HSL은 사람이 색을 인지하는 방식에 가깝게 설계되었습니다. 색상(Hue)은 0~360° 원 위의 각도, 채도(Saturation)와 명도(Lightness)는 백분율로 표현됩니다. RGB에서 빨간색 값을 조금만 바꿔도 파란색이 함께 변한 것처럼 느껴지지만, HSL에서는 명도를 독립적으로 조절해도 같은 색상을 유지할 수 있습니다. 이 점이 팔레트나 테마를 만들 때 HSL을 선호하는 핵심 이유입니다.
이 페이지의 입력과 출력
RGB 값을 세 개의 정수(0~255)로 입력하면 즉시 5가지 형식으로 변환 결과를 보여줍니다.
| 형식 | 범위 및 예시 |
|---|---|
| HSL | Hue 0~360°, Saturation %, Lightness % (예: 243°, 75%, 59%) |
| HEX | 6자리 16진수 (예: #4F46E5) |
| HSV | Hue 0~360°, Saturation %, Value % |
| CMYK | 0~100% (화면 추정치) |
| LAB | L* 0~100, a*, b* (색상 좌표) |
어느 필드든 직접 수정하면 나머지 필드가 즉시 업데이트됩니다. 모든 변환은 브라우저 안에서 처리되며, 입력한 데이터가 서버로 전송되지 않습니다.
RGB에서 HSL로 변환하는 수학
변환 과정은 먼저 RGB 값을 0~255에서 0~1로 정규화하는 것부터 시작합니다. 예를 들어 RGB(79, 70, 229)는 (0.3098, 0.2745, 0.8980)이 됩니다. 이 값들 중 최댓값, 최솟값을 찾고 그 차이(Δ)를 계산합니다.
- 명도(L) = (max + min) / 2
- 채도(S) = Δ / (1 - |2L - 1|), 단 Δ=0이면 S=0
- 색상(H) = 최댓값이 빨강이면 ((G - B) / Δ) mod 6, 초록이면 ((B - R) / Δ) + 2, 파랑이면 ((R - G) / Δ) + 4. 그 결과에 60을 곱해 각도로 변환합니다.
Δ=0인 회색은 색상이 정의되지 않으므로 H=0으로 처리합니다. 위 예시에서 계산하면 H=243°, S=75%, L=59%가 나옵니다.
HSL이 팔레트와 테마 생성에 유용한 이유
HSL의 가장 큰 장점은 명도를 독립적으로 조정해도 색상이 변하지 않는다는 점입니다. 예를 들어 브랜드 주황색(H=30°, S=80%)의 명도를 50%에서 70%로 올리면 더 밝은 톤(틴트)을 얻을 수 있습니다. 반대로 명도를 30%로 낮추면 어두운 셰이드가 됩니다. RGB로 같은 작업을 하려면 세 채널을 모두 비례적으로 바꿔야 하지만, 결과가 항상 의도한 색상을 유지하지는 않습니다.
UI/UX 디자이너가 WCAG 대비율을 맞출 때 HSL 명도를 조절하는 방법을 자주 씁니다. 예를 들어 배경색의 명도를 70%로 하고 글자색의 명도를 20%로 설정하면 4.5:1 비율을 확보할 수 있습니다. CSS에서 hsl(210, 50%, 70%) 같은 형태로 직접 사용할 수 있어 프런트엔드 개발자에게도 편리합니다.
주의사항과 한계
HSL은 완벽한 지각 균일 모델이 아닙니다. 같은 명도(예: 50%)에서 노란색과 파란색을 비교하면 노란색이 훨씬 밝게 느껴집니다. 이 때문에 데이터 시각화에서 등간격 순차 스케일이 필요하다면 LAB이나 LCH 같은 모델이 더 적합합니다.
CMYK 출력은 화면 추정치입니다. 실제 인쇄 색상과 다를 수 있으므로 전문 인쇄 작업 전에는 반드시 확인해야 합니다. LAB이나 CMYK 값을 입력했을 때 RGB 영역 밖의 색이면 가장 가까운 표시 가능 색상으로 조정됩니다. 이 경우 변환을 다시 하면 원래 값과 미세한 차이가 생깁니다.
입력 형식이 까다롭습니다. RGB는 79, 70, 229 또는 79 70 229 형식만 허용합니다. 잘못 입력하면 "Enter RGB as three numbers 0–255, like 79, 70, 229." 메시지가 나타납니다. HSL을 직접 입력할 때는 "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." 형식을 지켜야 합니다.
자주 묻는 질문
Q: RGB 값을 공백 대신 쉼표로 구분해도 되나요?
네, 쉼표와 공백 모두 허용합니다. 예를 들어 79 70 229와 79,70,229는 동일하게 처리됩니다.
Q: 255보다 큰 숫자를 입력하면 어떻게 되나요?
허용 범위를 벗어난 값이므로 오류 메시지가 표시됩니다. 올바른 범위(0~255)로 다시 입력하세요.
Q: CMYK 값이 인쇄 결과와 같은가요?
아닙니다. 이 도구의 CMYK는 RGB에서 추정한 값으로, 모니터 색공간을 기준으로 합니다. 실제 인쇄에서는 잉크, 용지, 프린터 프로파일에 따라 크게 달라질 수 있습니다.
Q: HSL에서 RGB로 다시 변환할 수 있나요?
네, HSL 필드에 직접 243, 75%, 59% 형식으로 입력하면 다른 모든 필드가 즉시 업데이트되면서 RGB 값도 보여줍니다.
Q: HSV와 HSL 중 어떤 것을 써야 하나요?
HSV(HSB)는 채도와 명도를 별도로 조절할 때 그림 편집기에서 자주 쓰입니다. 반면 HSL은 밝기를 직관적으로 다루기 때문에 CSS 색상 함수와 테마 작업에 더 적합합니다. 용도에 따라 선택하세요.
Q: LAB 값이 변환 후 다시 입력했을 때 달라지는 이유는 무엇인가요?
일부 LAB 색상은 sRGB 영역 밖에 있습니다. 이 도구는 그런 색을 가장 가까운 표시 가능 RGB로 조정한 뒤 다시 LAB로 변환하므로 원래 값과 차이가 생길 수 있습니다.