[CSS 컬러(Color)] 인간 친화적인 색상 모델, HSL

by

웹 컬러의 표준인 HEX와 RGB는 컴퓨터가 색을 정확하게 표현하는 데는 훌륭하지만, 우리 인간에게는 직관적이지 않습니다. 예를 들어, 디자이너가 “이 파란색 버튼에 마우스를 올리면, 조금 더 밝고 부드러운 느낌으로 바꿔주세요”라고 요청했을 때, rgb(59, 130, 246) 값을 어떻게 수정해야 할까요? 아마 색상 선택 도구(Color Picker)를 다시 열어야 할 겁니다.

이러한 문제를 해결해 주는 것이 바로 HSL(Hue, Saturation, Lightness) 색상 모델입니다. HSL은 컴퓨터가 아닌, 사람이 색을 인식하고 표현하는 방식에 기반하고 있어 훨씬 더 직관적이고 다루기 쉽습니다. 🎨

HSL의 3가지 요소

HSL은 ‘색상’, ‘채도’, ‘명도’라는 세 가지 요소로 색을 조합합니다.

1. Hue (색상)

  • 의미: ‘어떤 색인가?’를 결정하는 순수한 색상 값입니다.
  • 값: 0부터 360까지의 각도로 표현되는 색상환(Color Wheel)을 사용합니다. 0°는 빨강(Red), 120°는 초록(Green), 240°는 파랑(Blue)에 해당합니다.
  • 직관성: 색상의 종류를 바꾸고 싶을 때 이 값만 조절하면 됩니다.

2. Saturation (채도)

  • 의미: 색상의 ‘선명도’ 또는 ‘강렬함’을 나타냅니다.
  • 값: 0%부터 100%까지의 백분율로 표현합니다.
  • **0%**는 색이 전혀 없는 **회색조(Grayscale)**이며, **100%**는 해당 색상(Hue)이 가질 수 있는 가장 순수하고 선명한 색입니다.

3. Lightness (명도)

  • 의미: 색상의 ‘밝기’를 나타냅니다.
  • 값: 0%부터 100%까지의 백분율로 표현합니다.
  • **0%**는 빛이 전혀 없는 검은색, **100%**는 빛이 가장 밝은 흰색을 의미합니다. **50%**일 때 해당 색상이 가장 순수하게 표현됩니다.

HSL / HSLA 사용법

HSL은 hsl() 함수를 사용하며, 투명도를 추가한 HSLA는 hsla() 함수를 사용합니다.

.button {
  /* HSL: 파란색 계열, 채도 91%, 밝기 60% */
  background-color: hsl(217, 91%, 60%);
}

.overlay {
  /* HSLA: 위와 같은 색상에 50%의 투명도 적용 */
  background-color: hsla(217, 91%, 60%, 0.5);
}

HSL이 강력한 이유: 실전 예제

서두에서 언급했던 “버튼을 더 밝고 부드럽게” 만드는 요청을 HSL로 해결해 보겠습니다.

.button-hsl {
  /* H:217, S:91%, L:60% */
  background-color: hsl(217, 91%, 60%);
  color: white;
  transition: background-color 0.3s ease;
}

.button-hsl:hover {
  /* Hue(색상)는 그대로 두고,
     Saturation(채도)은 약간 낮추고,
     Lightness(밝기)는 약간 높여서
     더 부드럽고 밝은 느낌을 줌 */
  background-color: hsl(217, 85%, 65%);
}

이제 코드만 봐도 색상이 어떻게 변하는지 명확하게 이해할 수 있습니다. hover 시 색상(Hue)은 217로 그대로 유지한 채, 채도와 밝기만 조절하여 일관성 있는 색상 변화를 쉽게 만들어낼 수 있습니다.

✨ 고급 팁: HSL은 CSS 변수와 함께 사용할 때 더욱 강력해집니다.

:root {
  --brand-hue: 217;
  --brand-saturation: 91%;
}
.button-primary {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), 60%);
}
.button-dark {
  background-color: hsl(var(--brand-hue), var(--brand-saturation), 40%);
}

이제 --brand-hue 값만 바꾸면 웹사이트의 전체적인 색상 테마를 손쉽게 변경할 수 있습니다.

요약 및 정리

  1. HSL은 **색상(Hue), 채도(Saturation), 명도(Lightness)**를 기반으로 하는 인간 친화적인 색상 모델입니다.
  2. HEX나 RGB와 달리, 색상의 밝기나 선명도를 직관적으로 조작할 수 있어 색상 변형 및 테마 관리에 매우 유리합니다.
  3. 특히 버튼의 :hover 효과처럼 기존 색상에서 미세한 변화를 줄 때, 코드의 가독성과 유지보수성을 크게 높여줍니다.