시스매

HSL

7 min read

2025-10-02 00:38

Tags: 리액트 넥스트

HSL 색상(Hue), 채도(Saturation), 명도(Lightness)

  • 색상, 채도, 명도라는 인간의 시각적 인식 방식에 기반한 직관적인 색상 모델이다.
  • HSL은 RGB와 달리 색상의 특정 속성(밝기, 선명도 등)을 독립적으로 조절하기 용이하여 디자이너와 개발자에게 유용하다.
    • RGB 방식:
      • 원래 색이 rgb(50, 100, 200)이라면, 마우스를 올렸을 때의 색을 rgb(40, 80, 160)처럼
      • 세 가지 값을 모두 비례적으로 계산해야 한다. 매우 번거롭다.
    • HSL 방식:
      • 원래 색이 hsl(210, 60%, 49%)이라면, 명도(Lightness) 값만 살짝 낮춰 hsl(210, 60%, 40%)로 만들면 된다.
      • 색상과 채도는 그대로 유지한 채 밝기만 조절하는 것이 훨씬 간단하고 예측 가능하다.
  • 특히 CSS에서 색상 테마, 인터랙티브 효과, 색상 팔레트 생성 시 RGB보다 효율적인 제어가 가능하다.
  • 더 인간의 시각을 기반으로 하고 직관적이고 넓은 표현 가능한 OKLCH 같은 기능들 생기기도 함
구분HSL (Hue, Saturation, Lightness)RGB (Red, Green, Blue)
기반 원리인간의 색상 인식 방식 (색상, 선명도, 밝기)빛의 삼원색 혼합 (기계 중심)
직관성매우 높음. 특정 속성(예: 밝기)만 변경하기 쉬움.낮음. 밝기만 조절하려 해도 3개 값을 모두 변경해야 함.
주 사용처CSS, 디자인 시스템, 색상 피커, 데이터 시각화이미지 파일 형식, 디스플레이 장치, 스캐너
장점직관적인 색상 조작, 손쉬운 색상 팔레트 생성기계의 직접적인 색상 표현, 넓은 색상 영역
단점인간의 시각적 밝기 인식과 완벽히 일치하지는 않음.인간에게 비직관적, 색상 조작의 어려움

1. 색상 (Hue) 색의 정체성

색상은 우리가 흔히 말하는 ‘색깔’ 그 자체다. 빨강, 노랑, 파랑과 같은 순수한 색의 종류를 의미한다.

  • 표현:
    • 0부터 360까지의 각도로 표현한다. 360도 원형의 색상환(Color Wheel)을 떠올리면 쉽다.
  • 값의 의미:
    • 0°: 빨강 (Red)
    • 60°: 노랑 (Yellow)
    • 120°: 초록 (Green)
    • 180°: 청록 (Cyan)
    • 240°: 파랑 (Blue)
    • 300°: 자홍 (Magenta)
    • 360°는 다시 0°인 빨강으로 돌아온다.
  • 비유:
    • 색상환이라는 거대한 회전식 물감 팔레트에서 특정 색깔을 고르는 행위와 같다. 색상은 이 팔레트의 ‘각도’를 지정하는 것이다.

2. 채도 (Saturation) 색의 순수함

채도는 색이 얼마나 선명하고 순수한지를 나타내는 값이다. 채도가 높을수록 색은 쨍하고 강렬해지며, 낮을수록 탁해지면서 회색에 가까워진다.

  • 표현:
    • 0%부터 100%까지의 백분율로 표현한다.
  • 값의 의미:
    • 100%: 가장 순수하고 선명한 원색. 어떠한 회색도 섞이지 않은 상태.
    • 50%: 원색에 회색이 절반 섞인, 부드러운 톤의 색.
    • 0%: 완전한 무채색. 즉, 회색조(Grayscale)가 된다.
  • 비유:
    • 순수한 빨간색 물감에 회색 물감을 얼마나 섞을지 결정하는 것과 같다.
    • 회색 물감을 많이 섞을수록(채도를 낮출수록) 색은 점점 생기를 잃고 탁해진다.

3. 명도 (Lightness) 색의 밝기

명도는 색이 얼마나 밝거나 어두운지를 나타낸다. 명도가 높으면 흰색에 가까워지고, 낮으면 검은색에 가까워진다.

  • 표현:
    • 0%부터 100%까지의 백분율로 표현한다.
  • 값의 의미:
    • 100%: 가장 밝은 상태. 어떤 색상이든 관계없이 완전한 흰색이 된다.
    • 50%: 가장 이상적인 순색. 해당 색상과 채도에서 가장 ‘쨍한’ 색이 표현되는 지점이다.
    • 0%: 가장 어두운 상태. 어떤 색상이든 관계없이 완전한 검은색이 된다.
  • 비유:
    • 색깔 있는 조명 아래 있는 물체를 상상해 보자.
    • 조명의 밝기를 최대로 높이면(명도 100%) 물체는 하얗게 빛에 바랜 것처럼 보이고, 조명을 완전히 끄면(명도 0%) 물체는 검게 보일 것이다.
    • 명도 50%는 물체의 본래 색이 가장 잘 보이는 적절한 밝기의 조명 상태다.
.button {
  /* 색상: 파랑, 채도: 100%, 명도: 50% */
  background-color: hsl(240, 100%, 50%);
}
 
.overlay {
  /* 색상: 검정(색상, 채도 무관), 명도: 0%, 투명도: 50% */
  background-color: hsla(0, 0%, 0%, 0.5);
}

그래프 뷰

백링크