CSS에서 HSL과 HSLa 색상 활용법: RGB·Hex와의 차이까지 한 번에 이해하기

이 글에서는 CSS에서 HSL과 HSLa 색상을 사용하는 방법을 배우고, RGB/RGBa 또는 Hex 색상과 어떻게 다른지까지 함께 살펴봅니다.

HSL과 HSLa는 CSS에서 Hex 또는 RGB/RGBa 대신 사용할 수 있는 색상 표기 방식으로, 웹사이트에 더 실제 세계에 가까운 색감을 적용할 수 있게 해줍니다.

HSL과 HSLa는 CSS 세계에는 비교적 최근에 도입되었지만, 일반적인 색채 이론 분야에서는 1970년대부터 존재해 온 개념입니다.

HSL과 HSLa의 차이

HSLa는 HSL의 확장 버전으로, 알파 채널을 통해 투명도(불투명도) 값을 지정할 수 있습니다. 이는 RGB와 RGBa의 관계와 정확히 같은 구조입니다.

CSS에서는 hsl()과 hsla() 두 가지 색상 함수를 통해 HSL 계열 색상을 사용할 수 있습니다.

기본적인 HSL 사용 예시:

div {
    background-color: hsl(0, 100%, 50%); /* 빨간색 */
}

기본적인 HSLa 사용 예시:

div {
    background-color: hsla(0, 100%, 50%, 0.6);
}

"HSL이 RGB나 Hex보다 더 나은가?"라는 궁금증이 들 수 있습니다. CSS 언어에 HSL이 추가된 데에는 분명한 이유가 있겠죠.

솔직히 말하면, HSL이 Hex나 RGB보다 무조건 더 좋다고 단정하기는 어렵습니다. 어떤 작업을 하느냐에 따라 적합한 도구가 달라지기 때문입니다.

HSL의 핵심 아이디어는 실제 세계를 모방하는 직관적인 색상 체계를 제공하는 것입니다. HSL을 사용하면 색상 자체를 바꾸지 않으면서 밝기를 조절해 색의 표현만 변경할 수 있습니다.

Hex와 RGB로는 그렇게 할 수 없습니다.

예를 들어 지금 있는 방의 색들을 살펴봅시다. 우리가 그 색들을 인식하는 방식은 다음과 같은 광원에서 오는 빛의 영향을 받습니다:

지금 창문으로 자연광만 들어오고 있다고 가정해 봅시다.

이제 커튼을 내려 보세요. 커튼을 내리면 방의 밝기가 줄어들고, 방 안 모든 색의 인상이 달라집니다.

커튼을 내린 후에는 방 안 모든 물건의 색이 커튼을 내리기 전보다 어두운 버전으로 보일 것입니다.

그런데 여기서 중요한 핵심은 다음과 같습니다:

밝기를 줄인다고 해서 사물의 실제 색이 변하는 것은 아닙니다. 변하는 것은 그 색을 인식하는 지각, 즉 밝은 버전에서 어두운 버전으로 바뀌는 것뿐입니다.

커튼을 내리기 전과 후의 방 사진을 각각 찍어서 RGB 값으로 색상을 추출해 보면, 두 사진의 색은 서로 다른 색으로 기록됩니다. Hex 색상도 마찬가지입니다.

하지만 HSL은 서로 다른 두 색을 반환하지 않습니다. 같은 색상에 서로 다른 명도(Lightness) 값, 즉 HSL의 'L'만 달라진 형태로 표현됩니다.

예를 들어 방에 호두나무 색 테이블이 있다고 해봅시다. 커튼을 올린 상태에서 한 장, 내린 상태에서 한 장, 총 두 장의 사진을 찍습니다.

두 사진의 Hex와 RGB 값은 각각 서로 다른 색상 값으로 기록됩니다.

반면 HSL 값은 같은 색상이지만 명도 값만 다르게 기록됩니다.

일부 사람들은 다음과 같이 주장합니다:

세 가지 색상 방식을 모두 이해하고 경험해 본 사람들에게는 위 주장이 대체로 맞을 것입니다. 하지만 여러분의 경험은 다를 수 있습니다.

사람은 가장 많이 하는 일을 가장 잘한다는 말이 있듯이, Hex나 RGB를 오랫동안 사용해 왔고 HSL 경험이 전혀 없다면 처음에는 HSL이 오히려 더 어렵게 느껴질 수 있습니다.

HSL을 차별화하는 핵심을 정리하면 다음과 같습니다: