서론
웹 디자인이나 발표 자료, 앱 화면을 만들다 보면 한 가지 색만으로는 부족한 순간이 자주 생긴다. 버튼에는 조금 진한 색이 필요하고, 배경에는 같은 분위기를 유지하되 더 옅은 색이 필요하며, 강조 영역에는 원래 색보다 눈에 잘 띄는 색이 필요하다. 이때 색을 감으로 고르면 처음에는 괜찮아 보여도 여러 색이 함께 놓였을 때 어색해지기 쉽다.
HSL은 이런 상황에서 같은 톤의 파생색을 비교적 논리적으로 만들 수 있게 도와주는 색 표현 방식이다. 색을 단순히 빨강, 초록, 파랑의 조합으로 보는 것이 아니라 색상, 채도, 명도로 나누어 생각하기 때문에 초보자도 어떤 값을 조절해야 색의 분위기가 바뀌는지 이해하기 쉽다.
HSL은 색을 어떻게 나누어 바라보는가
HSL은 Hue, Saturation, Lightness의 약자다. Hue는 색상으로, 빨강인지 파랑인지 초록인지처럼 색의 종류를 뜻한다. Saturation은 채도로, 색이 얼마나 선명한지를 나타낸다. Lightness는 명도로, 색이 얼마나 밝거나 어두운지를 결정한다. 이 세 가지를 따로 조절할 수 있다는 점이 HSL의 핵심이다.
예를 들어 어떤 브랜드 색이 hsl(210, 80%, 45%)라고 한다면 210은 푸른 계열의 색상 위치를, 80%는 꽤 선명한 채도를, 45%는 중간보다 조금 어두운 명도를 의미한다. 같은 푸른색을 유지하고 싶다면 Hue를 크게 바꾸지 않고 채도와 명도만 조정하면 된다. 이 방식은 색을 하나씩 새로 고르는 것보다 훨씬 안정적인 결과를 만든다.
RGB나 HEX 값은 화면에서 색을 표현하는 데 익숙하지만, 파생색을 만들 때는 직관성이 떨어질 수 있다. #2f80ed에서 조금 더 연한 색을 만들고 싶을 때 어떤 숫자를 얼마나 바꿔야 할지 바로 떠올리기 어렵다. 반면 HSL에서는 Lightness를 올리면 밝아지고, Saturation을 낮추면 차분해진다는 식으로 조정 방향이 분명하다.
같은 톤의 파생색은 무엇을 유지해야 하는가
같은 톤의 색을 만든다는 말은 모든 색이 완전히 비슷해야 한다는 뜻이 아니다. 핵심은 색의 성격이 서로 이어져 보이도록 만드는 것이다. 보통은 Hue를 기준점으로 고정하거나 아주 조금만 움직이고, Saturation과 Lightness를 조절해 밝은 색, 어두운 색, 흐린 색, 강조 색을 만든다.
가장 쉬운 방법은 기준색 하나를 정한 뒤 명도 단계를 만드는 것이다. 예를 들어 기준색의 Lightness가 45%라면 배경용으로는 90% 안팎의 매우 밝은 색, 테두리나 보조 요소에는 70% 정도의 색, 버튼이나 제목에는 35~45%의 색을 사용할 수 있다. 이렇게 하면 색상은 같지만 역할에 따라 깊이가 달라져 화면이 정리되어 보인다.
채도는 색의 감정을 조절하는 값에 가깝다. 채도가 높으면 활기 있고 강한 인상을 주지만 넓은 면적에 쓰면 피로감을 줄 수 있다. 반대로 채도를 낮추면 차분하고 세련되어 보일 수 있지만, 너무 낮추면 회색에 가까워져 원래 색의 개성이 사라진다. 따라서 넓은 배경에는 낮은 채도와 높은 명도, 클릭을 유도하는 버튼에는 적당히 높은 채도와 중간 명도를 쓰는 식으로 역할에 따라 조절하는 것이 좋다.
초보자가 자주 헷갈리는 조절 포인트
가장 흔한 오해는 밝은 색을 만들 때 무조건 흰색을 섞는 것처럼 Lightness만 올리면 된다고 생각하는 것이다. 물론 명도를 올리면 색은 밝아지지만, 채도가 그대로 높으면 연한 색인데도 눈에 강하게 튈 수 있다. 부드러운 배경색을 원한다면 Lightness를 올리는 동시에 Saturation을 조금 낮추는 편이 더 자연스럽다.
반대로 어두운 색을 만들 때도 Lightness만 낮추면 충분하지 않은 경우가 있다. 명도를 많이 낮춘 색은 화면에서 거의 검정처럼 보일 수 있고, 특히 작은 텍스트나 아이콘에 쓰면 색의 차이가 잘 드러나지 않는다. 진한 강조색을 만들 때는 명도를 낮추되 채도를 너무 잃지 않도록 조절해야 원래 색의 성격이 유지된다.
Hue를 전혀 건드리지 않는 것이 항상 정답인 것도 아니다. 같은 파란색 계열이라도 밝은 단계에서는 약간 청록 쪽으로, 어두운 단계에서는 약간 남색 쪽으로 움직이면 더 자연스럽게 느껴질 때가 있다. 다만 초보 단계에서는 Hue를 크게 이동시키면 색상 체계가 흔들리기 쉬우므로 처음에는 5도에서 10도 안팎의 작은 변화로만 실험하는 편이 안전하다.
실제로 색을 고를 때 보는 기준
파생색을 만들 때 먼저 정해야 할 것은 색의 역할이다. 배경색인지, 본문 텍스트인지, 버튼인지, 경고 메시지인지에 따라 필요한 밝기와 대비가 달라진다. 예쁜 색을 먼저 찾기보다 어디에 쓰일 색인지 정한 뒤 HSL 값을 조정하면 선택 과정이 훨씬 단순해진다.
실제 적용에서는 대비를 반드시 확인해야 한다. 같은 톤으로 잘 묶인 색이라도 글자와 배경의 밝기 차이가 부족하면 읽기 어렵다. 특히 연한 파생색을 배경으로 쓰고 그 위에 비슷한 계열의 글자를 올리면 전체 분위기는 부드럽지만 가독성은 떨어질 수 있다. 디자인 도구나 브라우저 개발자 도구의 대비 확인 기능을 함께 사용하는 것이 좋다.
주의할 점과 HSL의 한계
HSL은 색을 이해하기 쉽게 나누어 주지만, 사람이 느끼는 밝기까지 완벽하게 반영하지는 않는다. 같은 Lightness 값이라도 노란색은 더 밝아 보이고 파란색은 더 어두워 보일 수 있다. 그래서 숫자만 맞췄다고 시각적으로 균형 잡힌 팔레트가 되는 것은 아니다. 최종 색은 실제 화면에 배치해 보고 눈으로 확인해야 한다.
또 하나의 주의점은 같은 톤을 유지하려다 화면 전체가 밋밋해지는 경우다. 모든 요소를 같은 Hue에서 명도만 다르게 만들면 일관성은 생기지만, 중요한 요소가 묻힐 수 있다. 강조가 필요한 지점에는 채도 차이를 주거나 보조색을 제한적으로 사용하는 방식이 필요하다. HSL은 출발점으로는 유용하지만, 색의 역할과 사용자 경험을 대신 판단해 주지는 않는다.
결론
HSL로 같은 톤의 파생색을 만드는 기본은 기준색의 Hue를 중심에 두고 Saturation과 Lightness를 조절하는 것이다. 밝은 배경색, 중간 단계의 보조색, 진한 강조색을 만들 때 각각 어떤 값을 움직이는지 이해하면 감에 의존하지 않고도 통일감 있는 색 조합을 만들 수 있다.
처음에는 기준색 하나를 정한 뒤 명도 단계를 만들고, 필요에 따라 채도를 조금씩 조절하는 방식으로 시작하는 것이 좋다. 다만 숫자만 믿기보다 실제 사용 위치, 글자와 배경의 대비, 색이 차지하는 면적을 함께 확인해야 한다. HSL은 색을 쉽게 다루게 해주는 도구이며, 좋은 결과는 그 도구를 화면의 맥락에 맞게 적용할 때 나온다.