HSL 색상 모델 이해 - 색상, 채도, 명도 세 가지 숫자로 원하는 색을 정확히 만드는 법
HEX 코드만 보면 막막했던 색 선택, HSL 색상 모델을 이해하면 달라집니다. 색상, 채도, 명도 숫자의 의미부터 CSS 활용법, 실무 배색 요령까지 한 번에 정리했습니다.
디자인 툴에서 마음에 드는 색을 골라 놓고도 조금 더 어둡게, 조금 덜 쨍하게 바꾸고 싶을 때 어디를 만져야 할지 몰라 한참 헤맨 경험이 있으실 겁니다. #3A7BD5 같은 HEX 코드는 보기만 해서는 무슨 색인지 짐작조차 어렵습니다. 이런 답답함을 해결해 주는 것이 바로 HSL입니다. HSL 색상 모델 이해가 끝나면 색을 숫자로 읽을 수 있게 되고, 원하는 방향으로 정확하게 조정하는 일이 훨씬 쉬워집니다.
HSL 색상 모델이란 - 색을 사람의 언어로 표현하는 방식
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)의 머리글자입니다. 색 하나를 세 가지 숫자로 표현하는데, 각 숫자가 사람이 색을 인식하는 방식과 그대로 맞아떨어진다는 점이 핵심입니다.
- 색상(H): 어떤 계열의 색인가. 0도에서 360도 사이의 각도로 표현합니다.
- 채도(S): 색이 얼마나 선명한가. 0%면 회색, 100%면 가장 쨍한 상태입니다.
- 명도(L): 색이 얼마나 밝은가. 0%는 검정, 100%는 흰색, 50%가 순수한 색입니다.
예를 들어 hsl(0, 100%, 50%)는 순수한 빨강입니다. 여기서 명도만 30%로 낮추면 어두운 빨강, 채도만 40%로 낮추면 차분한 빨강이 됩니다. 숫자 하나만 바꿔서 의도한 방향으로 색을 움직일 수 있다는 뜻입니다.
색을 고르는 능력은 감각의 문제가 아니라 좌표의 문제입니다. HSL은 색이라는 넓은 공간에 색상, 채도, 명도라는 좌표축을 세워 주고, 그 순간부터 색 조정은 감이 아니라 계산이 됩니다.
RGB, HEX와 무엇이 다를까
RGB는 빨강, 초록, 파랑 빛을 섞어 색을 만드는 방식으로, 모니터가 색을 표시하는 원리와 같습니다. HEX는 이 RGB 값을 16진수로 줄여 쓴 표기법입니다. 즉 RGB와 HEX는 기계가 색을 만드는 방식이고, HSL은 사람이 색을 인식하는 방식에 가깝습니다.
| 구분 | RGB | HEX | HSL |
|---|---|---|---|
| 빨강 표기 | rgb(255, 0, 0) | #FF0000 | hsl(0, 100%, 50%) |
| 표현 원리 | 빛의 삼원색 혼합 | RGB의 16진수 표기 | 색상, 채도, 명도 |
| 직관성 | 낮음 | 낮음 | 높음 |
| 주 용도 | 화면 출력, 이미지 처리 | 웹 색상 코드 공유 | 색 조정, 배색 설계 |
세 가지 모두 표현할 수 있는 색의 범위는 같습니다. #FF0000과 hsl(0, 100%, 50%)는 완전히 동일한 빨강입니다. 다만 rgb(58, 123, 213)에서 조금 더 어두운 색을 만들려면 세 숫자를 어떻게 바꿔야 할지 계산이 필요하지만, hsl(215, 65%, 53%)에서는 명도 53%만 낮추면 끝납니다. 어느 쪽이 작업하기 편한지는 분명합니다.
색상, 채도, 명도 값 제대로 읽기
색상(Hue) - 360도 색상환 위의 위치
색상은 색상환이라는 원 위의 각도입니다. 주요 지점만 외워 두면 코드만 보고도 색을 떠올릴 수 있습니다.
- 0도 빨강, 60도 노랑, 120도 초록
- 180도 청록, 240도 파랑, 300도 자홍
- 360도는 다시 빨강으로 돌아옵니다
채도(Saturation) - 선명함의 정도
채도 100%는 형광펜처럼 쨍한 상태, 0%는 색상 값과 무관하게 완전한 회색입니다. 실무에서 배경색이나 본문용 색은 채도를 20~60% 정도로 낮춰야 눈이 편안하고, 버튼이나 강조 요소는 70% 이상으로 올려야 시선을 끕니다.
명도(Lightness) - 밝기의 정도
명도 50%가 그 색의 가장 순수한 상태이고, 0%에 가까울수록 검정, 100%에 가까울수록 흰색이 됩니다. 명도가 극단으로 가면 채도 값이 얼마든 결국 검정이나 흰색이 된다는 점도 기억해 두면 좋습니다.
CSS에서 HSL 사용하는 방법
모든 주요 브라우저가 hsl() 표기를 지원하므로 HEX 대신 바로 사용할 수 있습니다. 문법은 간단합니다.
color: hsl(215, 70%, 50%); 처럼 색상, 채도, 명도 순서로 적습니다. 투명도가 필요하면 hsl(215 70% 50% / 0.5) 형태로 마지막에 알파 값을 추가합니다.
HSL의 진가는 색 변형을 코드에서 체계적으로 관리할 때 드러납니다. 브랜드 색을 hsl(215, 70%, 50%)로 정했다면 호버 색은 명도만 낮춘 hsl(215, 70%, 42%), 연한 배경은 hsl(215, 70%, 95%)로 만드는 식입니다. 색상과 채도가 같아서 아무렇게나 고른 색과 달리 전체가 한 가족처럼 통일감 있게 보입니다.
실무 활용 - 배색부터 콘텐츠 제작까지
배색이 어렵게 느껴진다면 HSL 숫자 규칙부터 시작해 보세요. 메인 색을 정한 뒤 색상 값만 30도 안팎으로 움직이면 비슷한 계열의 안정적인 배색이 되고, 180도 반대편으로 가면 강한 대비의 보색 배색이 됩니다. 이때 채도와 명도는 최대한 유지하는 것이 요령입니다.
블로그 썸네일이나 카드뉴스를 만들 때도 마찬가지입니다. 배경은 명도 20% 이하의 어두운 색, 글자는 명도 90% 이상의 밝은 색으로 잡으면 대비가 확보되어 작은 화면에서도 잘 읽힙니다. 문구를 넣기 전에 글자수 세기 도구로 제목 길이를 확인해 두면 글자가 넘쳐서 레이아웃이 깨지는 일도 막을 수 있습니다.
인쇄물이나 라벨 작업에서는 명도 대비가 더욱 중요합니다. 특히 바코드는 스캐너가 막대와 배경의 대비를 읽는 구조라서 어두운 막대와 밝은 배경의 명도 차이가 충분해야 인식됩니다. 바코드 생성기 같은 도구로 만든 바코드를 디자인에 넣을 때 배경 명도를 85% 이상으로 유지하면 인식 오류를 줄일 수 있습니다.
오늘 바로 해볼 수 있는 일은 두 가지입니다. 첫째, 지금 쓰고 있는 브랜드 색이나 자주 쓰는 색의 HEX 코드를 HSL 값으로 변환해서 색상, 채도, 명도가 각각 몇인지 확인해 보세요. 둘째, 그 색의 명도만 바꿔 어두운 버전과 연한 배경 버전을 만들어 보세요. 이 두 번의 연습만으로도 색을 다루는 방식이 감에서 숫자로 바뀌는 경험을 하시게 될 겁니다.
