HSL

"Hue, Saturation, Lightness"를 의미합니다.

HSL은 RGB 색상 모델과 유사하게 색상을 세 가지 속성의 조합으로 정의하는 색상 모델입니다. 먼저 색상환에서 한 지점을 지정한 다음 채도와 명도를 조정해 최종 색상을 만듭니다. 그래픽 디자이너와 웹 디자이너는 색상 선택기를 사용하지 않고도 색상을 조금씩 더 쉽게 조정할 수 있기 때문에 HSL을 자주 사용합니다.

RGB 색상 모델처럼 색상을 다른 색상의 혼합으로 표현하는 대신, HSL은 색상을 정의할 때 색상, 채도, 명도라는 세 가지 속성을 사용합니다:

• 색상은 0에서 359º 사이의 숫자로 색상환에서의 각도 위치를 나타냅니다. 순수한 빨간색은 색상환의 맨 위에 있으며 각도 값 0º으로 표시됩니다. 청록색은 반대쪽 끝인 180º에 있습니다.
• 채도는 0%에서 100% 사이의 백분율로 색상의 강도를 나타냅니다. 채도가 0%이면 회색이 됩니다.
• 명도는 0%에서 100% 사이의 백분율로 색상의 밝기를 나타냅니다. 명도가 0%이면 검은색이고, 50%이면 해당 색상 자체이며, 100%이면 흰색입니다.

HSL 색상 모델은 RGB와 동일한 범위의 색상을 만들 수 있지만 표현 방식이 다릅니다. 예를 들어 RGB 값이 R:166, G:242, B:242인 밝은 청록색또는 (16진수 값 #A6F2F2)은 색상 180º, 채도 75%, 명도 80%인 색상과 같습니다. 디지털 이미지 파일은 이미지 편집기에서 HSL을 사용하더라도 여전히 색상 정보를 RGB 값으로 저장합니다.

HSL은 색상을 숫자 집합으로 정의하는 더 직관적인 방법으로 여겨집니다. 웹 디자이너는 약간의 조정을 쉽게 하기 위해 RGB 대신 HSL을 사용해 CSS에서 색상을 지정하는 경우가 많습니다. 예를 들어 웹 디자이너가 CSS 코드 hsl(180, 75%, 80%)를 사용해 색상을 지정했다면 명도 값을 줄여 색상을 더 어둡게 만들 수 있습니다. RGB 값을 사용해 같은 조정을 하려면 세 값을 모두 서로 다른 양만큼 변경해야 합니다.

NOTE: HSL 색상 모델은 HSB 모델과 유사합니다. HSB는 색상에 같은 계산 방식을 사용하지만 명도 대신 밝기를 사용합니다. 이때 값 100은 흰색이 아니라 완전한 색상을 나타내며, 이 차이는 채도 계산에도 영향을 줍니다.