HSL 색 모델

정의

HSL은 하나의 색을 색상(hue), 채도(saturation), 명도(lightness) 세 개의 축으로 나눠서 다루는 방식입니다. 색상은 빨강·파랑·초록처럼 색의 종류를 0도부터 360도까지의 각도로 나타내고, 채도는 색이 얼마나 선명한지 즉 회색과 얼마나 멀리 떨어져 있는지를 말하며, 명도는 얼마나 밝은지 어두운지를 뜻합니다. 컴퓨터가 색을 저장하는 기본 방식인 RGB가 빨강·초록·파랑 빛의 양을 섞는 기계 중심의 언어라면, HSL은 사람이 색을 떠올리는 방식에 훨씬 가깝게 정리해 둔 언어라고 보면 됩니다.

왜 중요한가

HSL이 중요한 이유는 색을 '조절'하기가 직관적이기 때문입니다. RGB에서 파란색을 조금 더 차분하게 만들려면 세 값을 동시에 계산해야 하지만, HSL에서는 채도 하나만 낮추면 됩니다. 반대로 같은 색을 더 밝게 하고 싶으면 명도만 올리면 되고, 전혀 다른 색으로 바꾸고 싶으면 색상 각도만 돌리면 됩니다. 이렇게 축이 서로 독립적으로 움직이기 때문에 원하는 변화를 한 축의 조작으로 정확히 만들 수 있습니다. 이 예측 가능성은 색을 다루는 자신감으로 이어져, 디자인이 두려운 개발자도 감이 아니라 규칙으로 색을 결정할 수 있게 해 줍니다. 그래서 디자인 시스템에서 색을 규칙적으로 확장하거나 여러 색의 톤을 서로 맞출 때 HSL은 매우 든든한 기준이 되며, 코드에서도 값의 의미가 그대로 드러나 유지보수가 한결 쉬워집니다.

흔한 실수

• 명도만 바꾸면 자동으로 예쁜 색 단계가 만들어질 거라 기대하는 경우입니다. 실제로는 채도가 그대로 남아 아주 밝은 톤이 형광처럼 뜨거나, 어두운 톤이 탁하게 가라앉습니다. 밝기를 바꿀 때는 채도도 함께 미세하게 손봐야 단계가 고르고 자연스럽게 이어집니다.
• HSL의 명도가 사람이 느끼는 실제 밝기와 정확히 일치한다고 믿는 것입니다. 같은 명도 50이라도 노랑은 눈부시게 밝게 느껴지고 파랑은 훨씬 어둡게 느껴집니다. 색이 서로 얼마나 대비되는지를 판단할 때는 명도 숫자만 믿지 말고 반드시 눈으로도 확인해야 합니다.
• 채도를 끝까지 올려야 선명하고 좋은 색이라고 여기는 것입니다. 채도가 지나치게 높은 색이 화면을 가득 채우면 눈이 금세 피로해지고, 정작 강조하고 싶은 요소가 묻혀 버립니다.

실무 팁

• RGB보다 사람이 조절하기 직관적이라는 점을 적극 활용하세요. '채도만 낮춰 차분하게', '명도만 높여 밝게'처럼 원하는 변화를 축 하나의 움직임으로 정리하면, 색을 다루는 작업이 훨씬 예측 가능해지고 팀원과 의도를 말로 공유하기도 쉬워집니다.
• 브랜드 색의 색상 각도를 고정해 두고 채도와 명도만 조절해 여러 단계를 만들어 보세요. 색상이 흔들리지 않으면 밝은 톤부터 진한 톤까지 한 가족처럼 묶여 보입니다.
• 더 정교한 밝기 제어가 필요하면 사람 눈에 맞춘 최신 색 모델도 함께 검토하세요. HSL의 한계를 이해하고 있으면 언제 다른 도구로 넘어갈지 판단하기 쉬워집니다.

관련 개념