HSL to RGB 색상 변환기

결과의 R, G, B 값은 0~255 척도에서 빨강, 초록, 파랑 채널의 강도를 나타냅니다. 이 값들은 CSS에서 rgb(R, G, B) 형태로 바로 사용하거나 이미지 편집 소프트웨어에서 사용할 수 있습니다.

먼저 채도와 명도로부터 '채도 폭'(C) 값을 계산합니다. 색상 값이 어느 60도 구간에 속하는지에 따라 R, G, B 채널에 임시 값을 할당하고, 마지막으로 명도 오프셋(m)을 더해 결과를 0~255 범위로 스케일링합니다.

• 채도와 명도를 백분율에서 0~1 범위로 변환합니다.
• 명도 오프셋(m)과 별개로 '채도 폭'(C) 값을 계산합니다.
• 색상 값이 어느 60도 구간에 속하는지 결정합니다.
• 해당 구간에 따라 R, G, B 채널에 임시 값(C, X, 0의 조합)을 할당합니다.
• 명도 오프셋(m)을 더한 뒤 결과에 255를 곱해 최종 R, G, B 값을 구합니다.

H=210°, S=65%, L=45%(선명한 파란색)는 약 R=40, G=115, B=189에 해당합니다.

• 색상(H)은 0에서 360도 사이로 입력하세요. 360도는 0도(빨강)와 같은 색을 나타냅니다.
• 채도와 명도는 백분율(0-100)로 입력하세요. 소수 값을 사용하면 더 정확한 결과를 얻을 수 있습니다.
• 결과로 나온 RGB 값은 소수일 수 있습니다. 화면이나 CSS에서 사용할 때는 가장 가까운 정수로 반올림하세요.

HSL(색상, 채도, 명도) 모델은 디자이너가 색을 정의할 때 가장 자주 사용하는 형식 중 하나입니다. 색상, 채도, 명도를 독립적으로 조정할 수 있어 색의 변형을 만들기가 쉽기 때문입니다. 하지만 화면과 대부분의 이미지 형식은 색을 RGB로 처리하므로, HSL로 정의된 색은 표시되기 전에 RGB로 변환되어야 합니다.

이 변환의 핵심은 색상(H) 값이 색상환의 어느 60도 구간에 속하는지를 판단하는 것입니다. 색상환은 60도씩 여섯 개의 동일한 구간으로 나뉘며, 각 구간마다 빨강, 초록, 파랑 채널의 서로 다른 조합이 지배적으로 작용합니다.

채도와 명도는 해당 구간 내에서 채널 값이 얼마나 '넓게'(채도 폭, C) 나타날지를 결정합니다. 채도가 높을수록 더 선명한 색이 되고, 채도가 낮을수록 회색에 가까운 흐릿한 색이 되며, 명도는 결과를 검정이나 흰색 쪽으로 이동시킵니다.

이 도구는 입력한 H, S, L 값을 표준 변환 단계에 따라 처리하여 바로 사용할 수 있는 R, G, B 값을 만들어냅니다. 결과는 CSS의 rgb() 함수나 이미지 편집 소프트웨어, 색상을 다루는 다른 도구에서 사용할 수 있습니다.

HSL을 RGB로 변환하는 것은 디자인 시스템에서 HSL로 정의된 브랜드 색상을, RGB나 HEX 입력을 요구하는 오래된 이미지 편집기나 인쇄 소프트웨어 같은 외부 도구로 전달해야 하는 개발자에게 특히 유용합니다.