디자인 툴이 RGB 대신 HSL을 쓰는 이유
피그마나 포토샵에서 색상 피커를 열면 R, G, B 세 개의 슬라이더 대신 색조(Hue)·채도(Saturation)·명도(Lightness) 슬라이더가 먼저 보이는 경우가 많습니다. 같은 파란색 계열을 유지한 채 밝기만 다른 톤온톤 배색을 만들려고 RGB 값을 이리저리 바꿔봤지만 매번 색 자체가 달라져서 포기한 경험이 있을 수 있습니다. 이건 도구 설계자의 취향이 아니라 두 색상 모델이 색을 표현하는 구조 자체가 다르기 때문입니다.
요약 ① RGB는 빨강·초록·파랑 세 채널의 조합으로 색을 표현해 "색조는 그대로, 밝기만 조절"이라는 개념이 따로 없습니다 ② HSL은 색조·채도·명도를 분리해두어 색조(H)를 고정한 채 명도(L)만 바꾸면 같은 색 계열의 톤온톤 팔레트가 만들어집니다 ③ RGB 값으로 같은 결과를 내려면 채널마다 다른 비율로 계산해야 해서 손으로 맞추기 어렵습니다
RGB 슬라이더로는 톤온톤이 잘 안 만들어지는 이유
RGB는 빛의 삼원색인 빨강·초록·파랑을 각각 얼마나 섞을지로 색을 표현합니다. 이 세 값은 색조·채도·명도라는 개념과 일대일로 대응하지 않고, 하나의 색 안에 뒤섞여 있습니다. 그래서 "이 색의 색조는 유지한 채 명도만 낮추기"를 하려면 R, G, B 세 값을 색마다 다른 비율로 동시에 조정해야 합니다.
예를 들어 하늘색 계열의 HEX #2E9BE0은 R:46, G:155, B:224로 세 값의 비율이 제각각입니다. 이 색을 "20% 더 어둡게"만 만들고 싶어도 세 채널에 똑같은 숫자를 빼면 비율이 달라져 색조 자체가 틀어지고, 채널 하나가 0 밑으로 잘리면 채도까지 무너집니다.
HSL은 이 문제를 색조(H)·채도(S)·명도(L)라는 세 축으로 분리해서 해결합니다. 색조는 색상환에서의 위치, 채도는 색의 선명함, 명도는 밝고 어두운 정도를 각각 독립적으로 나타내므로, 명도(L) 값 하나만 움직이면 색조와 채도는 그대로 둔 채 밝기만 단계적으로 바뀝니다.
같은 색조 유지한 채 명도만 바꾸는 법 — 확인 방법
디자인 툴이나 도구 없이 손으로 확인하려면 먼저 기준 색의 HSL 값을 알아야 합니다. 대부분의 색상 피커는 HEX 옆에 HSL 표기를 함께 보여주므로, 여기서 H·S·L 세 숫자를 그대로 적어둡니다.
그다음 H(색조)와 S(채도) 숫자는 그대로 두고 L(명도)만 원하는 단위(예: 10%씩)로 올리거나 내립니다. 예를 들어 기준색이 hsl(200, 80%, 50%)이라면 명도만 10%씩 낮춰 hsl(200, 80%, 40%), hsl(200, 80%, 30%)로 만들면 색조와 채도는 그대로인 톤온톤 팔레트가 됩니다.
문제는 이 HSL 값을 다시 코드에서 쓸 HEX로 바꾸는 과정입니다. HSL을 HEX로 변환하려면 명도와 채도로 최댓값·최솟값을 구하고, 색조가 어느 60도 구간에 속하는지에 따라 다른 공식을 적용해야 해서 팔레트 하나를 만드는 데도 계산을 여러 번 반복하게 됩니다.
저희 도구로 확인하기. 기준 HSL 값과 명도(또는 채도) 변화 단위, 만들고 싶은 단계 수만 입력하면 각 단계의 HEX·HSL 코드를 계산해서 바로 보여줍니다.
무료 · 가입 불필요 · 브라우저에서 바로 톤온톤 팔레트 생성
자주 막히는 지점
| 상황 | 왜 이렇게 되는지 |
|---|---|
| RGB 세 채널에 같은 숫자를 더하거나 뺌 | 채널별 비율이 달라져 색조 자체가 바뀝니다 |
| 색조(H)와 채도(S)까지 함께 바꿈 | 톤온톤이 아니라 완전히 다른 색 계열이 됩니다 |
| 명도(L)를 0%나 100%에 가깝게 밀어붙임 | 검정·흰색에 가까워지며 색조 정보가 사라집니다 |
| 색조(H)만 단계적으로 바꾸고 명도는 고정 | 톤온톤이 아니라 무지개처럼 색이 순환하는 배색이 됩니다 |
표에서 보듯 톤온톤 배색이 무너지는 경우는 대부분 색조·채도·명도 중 건드리지 말아야 할 값까지 같이 움직였을 때입니다. 명도(또는 채도) 하나만 고정폭으로 움직이면 이런 실수를 피할 수 있습니다.
정리
RGB는 빨강·초록·파랑을 뒤섞어 색을 표현하기 때문에 "색조는 그대로, 밝기만 조절"이라는 개념이 채널 값 안에 따로 존재하지 않습니다. HSL은 색조·채도·명도를 독립된 축으로 분리해두어 명도(L) 하나만 단계적으로 움직이면 같은 색 계열의 톤온톤 팔레트를 만들 수 있습니다.
손으로 하려면 HSL 값을 확인하고 명도만 단위별로 계산한 뒤 다시 HEX로 변환해야 하지만, 이 변환 과정 자체가 반복 계산이라 여러 단계를 만들수록 번거로워집니다.
무료 · 가입 불필요 · 브라우저에서 바로 톤온톤 팔레트 생성
자주 묻는 질문
RGB 값만으로도 톤온톤 배색을 만들 수 있나요?
가능하지만 세 채널을 색마다 다른 비율로 계산해야 하고, 계산이 조금만 어긋나도 색조가 틀어지거나 채도가 무너집니다. 색조를 고정한 채 명도만 옮기는 HSL 쪽이 계산이 단순합니다.
톤온톤을 만들 때 채도(S)는 그대로 둬야 하나요?
같은 색 계열이라는 느낌을 유지하려면 채도는 고정하고 명도(L)만 단계별로 바꾸는 쪽이 자연스럽습니다. 채도까지 함께 바뀌면 같은 색조라도 탁하거나 쨍한 느낌이 섞여 톤온톤보다는 여러 색이 섞인 배색처럼 보입니다.
색조(H) 값은 몇 단위씩 바꾸는 게 자연스러운가요?
색조를 조금이라도 바꾸면 톤온톤이 아니라 색상환을 따라 이동하는 그라데이션 배색이 됩니다. 순수한 톤온톤을 원한다면 색조 변화 단위는 0으로 두고 명도(또는 채도) 변화 단위만 설정하면 됩니다.