HSL에서 RGB로: 사람이 생각하는 색을 화면이 표시하는 숫자로 바꾼다
HSL(색상, 채도, 명도)은 색을 직관적으로 다루기 위해 설계된 모델이다. 채도와 명도를 백분율로, 색상을 0–360도로 표현하면, 사람은 명도만 바꿔도 같은 색상 계열을 유지할 수 있다. 반면 RGB(0–255)는 모니터가 빛을 내는 방식을 그대로 숫자로 옮긴 것이다.
이 페이지는 사용자가 입력한 HSL 값을 실시간으로 RGB로 변환하고, 동시에 HEX, HSV, CMYK, LAB까지 보여준다. 변환은 무손실이며, LAB나 CMYK에서 RGB로 변환할 때 발생하는 색역(clipping) 문제가 전혀 없다. 모든 유효한 HSL 값은 디스플레이 가능한 RGB 삼중항 하나에 정확히 대응한다.
입력과 출력: 모든 필드가 즉시 갱신된다
입력은 하나뿐이다. HSL 필드에 243, 75%, 59%와 같이 색상(0–360), 채도(%), 명도(%)를 쉼표로 구분해 입력한다.
출력은 다음 6개 포맷으로 동시에 표시된다:
| 포맷 | 예시 값 |
|---|---|
| HEX | #4F46E5 |
| RGB | 79, 70, 229 |
| HSL | 243, 75%, 59% |
| HSV | 242, 69%, 89% |
| CMYK | 65%, 69%, 0%, 10% (화면 추정값) |
| LAB | 35, 52, -72 (근사치) |
모든 변환은 브라우저 안에서만 일어난다. 서버로 전송되는 데이터는 없다.
왜 이 페이지가 필요한가: 인간 중심 색상 작업을 코드로 옮길 때
디자이너가 색상 팔레트나 테마를 만들 때, HSL은 명도 슬라이더 하나만 움직여도 색상이 변하지 않으므로 실험에 적합하다. 하지만 최종 CSS나 JavaScript 코드에 넣을 값은 RGB나 HEX여야 한다.
예를 들어 hsl(210, 80%, 50%)는 밝은 하늘색이다. 이 값을 CSS background-color: rgb(25, 128, 230)로 변환해야 한다. 이 페이지는 그 작업을 즉시 해준다. 수동 계산 없이도 여러 포맷을 동시에 확인할 수 있어, 디자인 도구(HSL 기반)와 코드(RGB/HEX) 사이의 간격을 메운다.
변환 규칙과 경계 조건
- 올바른 형식:
243, 75%, 59%처럼 색상, 채도, 명도를 쉼표와 공백으로 구분하고 채도와 명도는 반드시%를 붙인다. 숫자만 입력하면 오류가 발생한다. - 잘못된 입력 시 메시지:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."가 표시된다. 영어 메시지 그대로 나타나지만, 기능 자체는 문제없이 동작한다. - CMYK 경고: CMYK 값은 화면에서 추정한 것이다. 실제 인쇄는 종이, 잉크, 프린터 프로파일에 따라 달라지므로, 이 값을 인쇄용으로 그대로 쓰면 안 된다. CMYK 전용 프로파일 변환 도구가 필요하다.
- 색역 문제 없음: HSL은 sRGB 색 공간을 기반으로 정의된다. 따라서 HSL → RGB 변환은 항상 디스플레이 가능한 범위 안에 머문다. LAB나 CMYK처럼 클리핑이 발생하지 않는다.
실전에서 자주 하는 실수
- 색상 값을 0–100으로 입력: HSL의 색상(H)은 0–360도다. 100을 넣으면 완전히 다른 색이 나온다. 예:
100, 50%, 50%는 연두색,243, 75%, 59%는 보라색. - 채도나 명도에
%누락:243, 75, 59라고 입력하면 파싱 오류가 발생한다. 반드시 퍼센트 기호를 포함해야 한다. - CMYK 값을 실제 인쇄에 사용: 위에서 강조했듯이 화면 추정치이므로, 인쇄용 색상은 별도 ICC 프로파일로 변환해야 한다.
FAQ
Q: HSL과 HSV의 차이는 무엇인가요?
A: 둘 다 색상(H)은 같지만, HSL은 명도(Lightness)가 0%면 검정, 100%면 흰색인 반면, HSV는 명도(Value)가 0%면 검정, 100%면 순색이 된다. 채도 표현도 다르다. 이 페이지는 두 모델을 모두 출력하므로 비교하기 쉽다.
Q: 변환이 정확한가요? 소수점 이하 반올림은?
A: 모든 HSL 값은 sRGB 색 공간 내에서 정확히 매핑된다. RGB 값은 정수(0–255)로 반올림되며, 이 반올림은 표준 변환 알고리즘을 따른다. 반올림 오차는 1 미만이므로 시각적으로 구분할 수 없다.
Q: HEX 값이 #RRGGBB 외에 #RGB로 짧게 표시되나요?
A: 아니요. 항상 6자리 HEX로 표시된다. 예: #4F46E5 (약식 #46E는 지원하지 않음).
Q: CMYK 값이 인쇄용으로 부정확하다면 왜 표시하나요?
A: 웹 디자이너가 빠르게 대략적인 CMYK 값을 참고할 수 있도록 제공한다. 정확한 인쇄 색상이 필요하면 전용 소프트웨어(Adobe, Krita 등)와 ICC 프로파일을 사용해야 한다.
Q: HSL 값을 직접 수정하면 다른 필드도 업데이트되나요?
A: 그렇다. 하나의 필드를 편집하면 나머지 다섯 포맷이 즉시 재계산된다. 실시간 변환이 핵심 기능이다.
결론 (요약)
HSL은 사람이 색을 직관적으로 조작하기에 좋고, RGB는 화면이 색을 표시하기에 적합하다. 이 페이지는 그 사이를 번거로움 없이 연결해 준다. 색상 팔레트를 만들거나 CSS 코드에 값을 옮겨야 할 때, 직접 수식을 외울 필요 없이 입력만 하면 된다. CMYK를 제외한 모든 변환은 무손실이며, 브라우저 안에서 안전하게 처리된다.
참고: CMYK 값은 화면 추정치이며, 실제 인쇄와 차이가 있을 수 있습니다.