실전 컬러 모델 가이드
HSB, HSL, HSV 차이와 올바른 사용 시점
세 이름은 같은 색상환을 쓰지만 언제나 같은 좌표를 뜻하지는 않습니다. 세 번째 채널이 어떻게 다르고, 같은 백분율이 왜 다른 색을 만들며, 선택한 색을 재현 가능한 웹 값으로 옮기는지 설명합니다.
HSB HSL HSV 차이
HSB, HSV, HSL은 같은 모델인가요?
HSB와 HSV는 일반적으로 RGB 기반의 같은 모델을 가리키며 Brightness와 Value는 세 번째 채널의 다른 이름입니다. HSL은 별도 변환입니다. HSL은 Lightness 50%에서 완전 채도의 순색을 만들고 100%에서 흰색이 됩니다. HSB 또는 HSV는 Brightness 100%에서 순색을 만들며, 채도가 0%일 때만 흰색이 됩니다. 백분율 세 개만 전달하지 말고 모델 이름을 함께 기록하세요.
짧은 결론
- HSB와 HSV는 앱, 범위, 색상 프로필, 반올림 방식을 확인한 뒤 같은 모델로 다룹니다.
- HSB의 채도와 밝기 수치를 HSL의 채도와 명도 입력란에 그대로 붙여 넣지 않습니다.
- 직관적인 피커 조정에는 HSB/HSV, CSS 표기와 중간 명도 중심 변형에는 HSL이 유용합니다.
- 전달용으로 정확한 HEX 또는 RGB를 저장하고, 대비와 지각 색차는 각각의 전용 방법으로 검사합니다.
같은 색상 계열을 다루는 서로 다른 세 가지 역할
각 모델은 화면 색을 특정 결정에 편하도록 재배열합니다. 아래 기준점을 보면 도구 사이에서 숫자를 옮기기 전에 차이를 확인할 수 있습니다.
| 모델 | 세 번째 채널 | 기준 값 | 대표 용도 |
|---|---|---|---|
| HSB / HSV | Brightness / Value | S 100%, B/V 100%에서 순색, B/V 0%에서 검정 | 컬러 피커, 이미지 도구, 색상·선명도·어두움의 시각 조정 |
| HSL | Lightness | S 100%, L 50%에서 순색, L 0% 검정, L 100% 흰색 | CSS hsl() 값과 중간점을 기준으로 한 밝고 어두운 변형 |
| HEX / RGB | 빨강·초록·파랑 채널 | 변환 뒤 명시되는 하나의 sRGB 채널 조합 | 안정적인 웹 전달, 디자인 토큰, 구현 기록 |
이름이 실제보다 더 호환되어 보이는 이유
HSB, HSV, HSL은 모두 색상으로 시작하며 보통 색상환을 도는 각도로 표현합니다. 세 모델 모두 채도라는 이름의 채널도 갖습니다. 이런 공통 용어 때문에 세 좌표가 곧바로 호환되는 것처럼 보입니다. 하지만 각 모델은 화면의 RGB 좌표를 다루기 편하게 재배열한 것이며 빛을 독립적으로 측정하는 물리 단위가 아닙니다. HSV와 HSL의 원형을 설명한 연구도 RGB 큐브를 탐색하기 위한 서로 다른 두 기하 구조를 제안했습니다. 같은 단어가 들어간다고 해서 좌표의 계산과 끝점까지 같아지는 것은 아닙니다.
가장 안전한 해석은 모델을 작동 규칙으로 보는 것입니다. 모델은 세 입력을 빨강, 초록, 파랑 출력으로 바꾸는 절차를 도구에 제공합니다. 두 앱이 같은 변환과 반올림을 쓰면 한쪽이 HSB, 다른 쪽이 HSV라고 표시해도 최종 RGB나 HEX가 일치할 수 있습니다. 한쪽이 HSL이면 채도와 세 번째 채널의 계산이 달라집니다. 따라서 210°, 70%, 80%를 그대로 복사하면 표시 숫자는 같아도 색 견본이 변할 수 있습니다. 전달할 때는 모델 이름과 변환 결과를 함께 남겨야 합니다.
HSB와 HSV가 Brightness 또는 Value를 표현하는 방식
일반적인 HSV에서 Value는 정규화한 빨강, 초록, 파랑 채널 가운데 가장 큰 값입니다. HSB는 보통 같은 조절 축을 더 친숙한 단어인 Brightness로 부릅니다. 채도와 밝기를 모두 100%로 두면 선택한 색상은 RGB 범위의 가장 강한 경계 색에 도달합니다. 밝기를 낮추면 검정으로 이동하고, 채도를 낮추면 밝기 상한은 유지한 채 무채색으로 이동합니다. 채도 0%, 밝기 100%의 결과는 강한 유채색이 아니라 흰색입니다. 각 채널은 독립 점수가 아니라 하나의 표시 색을 함께 결정합니다.
이 구조는 2차원 피커에 잘 맞습니다. 한 띠에서 색상을 고른 뒤 가로로 채도, 세로로 밝기를 바꿀 수 있습니다. Adobe의 현재 Color Picker 문서도 0–360° 색상과 채도·밝기 백분율을 사용하는 HSB 조작을 설명합니다. 그러나 Brightness를 측정된 휘도나 사람이 느끼는 밝기라고 해석하면 안 됩니다. 노랑과 파랑이 둘 다 B 100%여도 상대 휘도와 시각적 가벼움은 크게 다를 수 있습니다. 피커 좌표는 편집을 위한 것이며 지각이나 접근성 합격을 증명하는 수치가 아닙니다.
HSL이 중간점과 양 끝을 바꾸는 방식
HSL은 같은 색상환을 유지하지만 Lightness 축에서 0%를 검정, 100%를 흰색, 완전 채도의 순색을 50%에 둡니다. 중간보다 높이면 흰색으로, 낮추면 검정으로 갑니다. 이 대칭은 기준색 주변에서 틴트와 셰이드를 생각할 때 편리합니다. 동시에 HSB Brightness 100%를 HSL Lightness 100%로 바꾸면 안 되는 이유이기도 합니다. 앞의 값은 강한 빨강이나 파랑이 될 수 있지만 뒤의 값은 색상과 채도에 관계없이 항상 흰색입니다. 입력란 순서보다 각 축의 기준점과 끝점을 먼저 확인해야 합니다.
채도 역시 이 구조에 따라 의미가 달라집니다. HSL에서는 명도가 흰색이나 검정에 가까우면 채도 필드가 100%여도 실제로 쓸 수 있는 크로마가 작습니다. HSV는 Value와의 관계로 채도를 계산합니다. W3C CSS Color 명세는 hsl()을 sRGB 색을 만드는 함수로 정의하고 브라우저가 따르는 변환 동작을 제공합니다. 반면 표준 hsv() 또는 hsb() CSS 함수는 정의하지 않습니다. HSB 피커에서 고른 색은 HEX, RGB, HSL 등 브라우저가 지원하는 형식으로 변환하고 실제 출력이 같은지 확인한 뒤 사용해야 합니다.
HSB 또는 HSV가 작업 모델로 더 명확한 경우
작업 순서가 색상 계열을 고르고, 얼마나 선명할지 정하고, 마지막으로 얼마나 어둡게 할지 결정하는 흐름이라면 HSB 또는 HSV가 명확합니다. 페인팅 인터페이스, 사진과 일러스트 도구, 팔레트 탐색, Toon Tone 색 기억 연습에 잘 맞습니다. 정답 공개 뒤 색상은 맞지만 추측이 너무 강했다면 채도만 낮추고, 색이 무거웠다면 밝기를 올릴 수 있습니다. 하나의 총점만 보는 대신 어떤 채널을 다음 라운드에서 수정할지 알 수 있습니다. 한 번에 한 축을 바꾸면 우연히 보기 좋아진 조정과 반복 가능한 학습도 구분하기 쉽습니다.
다만 같은 수치 간격이 같은 시각 변화라고 생각해서는 안 됩니다. HSB와 HSV는 지각적으로 균일한 공간이 아닙니다. 노랑의 밝기를 10 낮춘 변화와 파랑을 10 낮춘 변화가 같은 크기로 보인다는 보장은 없습니다. 색상 각도 차이도 일정한 시각 거리를 뜻하지 않습니다. 화면 프로필, 주변색, 적응, 조명, 표시 크기까지 영향을 줍니다. 두 색이 얼마나 가깝게 보이는지 결정할 때는 실제 견본과 목적에 맞는 색차 방법을 함께 봅니다. 글자 가독성을 판단할 때는 실제 전경과 배경의 상대 휘도 대비를 별도로 계산합니다.
CSS와 체계적인 명암 변형에서 HSL이 유용한 경우
구현 환경이 hsl()을 직접 받고 명도 중간점을 기준으로 값을 설명하려면 HSL이 유용합니다. RGB 채널을 하나씩 읽는 것보다 같은 색상의 밝고 어두운 인터페이스 변형을 팀에서 논의하기 쉽습니다. CSS Color 4는 공백으로 구분하는 현대식 hsl() 구문과 선택적인 알파 값을 지원하며, 브라우저는 결과를 sRGB 색으로 해석합니다. 스타일시트나 디자인 토큰에 색을 직접 보관할 때 플랫폼에 기본으로 포함되고 개발자 도구에서 읽기 쉬운 표기라는 점은 분명한 장점입니다. 변환 의도와 출발점도 코드 가까이에 남길 수 있습니다.
하지만 편리한 표기가 지각 척도나 자동 팔레트 시스템이 되는 것은 아닙니다. 모든 색상에 같은 채도와 명도를 적용하면 시각적 무게가 다른 견본이 나올 수 있습니다. hover 색은 배경 위에서 다시 확인하고, 테마 토큰은 상태마다 대비를 검사해야 합니다. 더 새로운 지각 기반 CSS 공간이 일부 체계적 팔레트에는 더 적합할 수 있지만 모델 변경만으로 색역, 브라우저 지원, 제품 제약, 실제 컴포넌트 검토가 사라지지 않습니다. 선택 이유와 폴백, 승인 기준을 함께 기록해야 운영 가능한 색 체계가 됩니다.
피커의 색을 모호함 없이 코드로 전달하는 방법
먼저 모델, 사용 앱, 색상 프로필 또는 웹 가정, 정확한 세 값을 기록합니다. 다음으로 결과의 여섯 자리 HEX 또는 RGB 값을 저장합니다. 다른 도구가 HSB 백분율을 HSL로 잘못 읽는 일을 막기 때문에 이 최종 채널 값이 가장 안정적인 전달물입니다. CSS 작성자가 hsl()을 선호하더라도 승인된 RGB에서 변환하고 브라우저 결과를 비교해야 하며, 입력란 위치만 보고 숫자를 복사하면 안 됩니다. 재현에 필요한 정밀도는 남기되 소수점 자릿수를 늘린다고 보정되지 않은 화면이나 압축 이미지가 정확해진다고 주장하지 않습니다.
마지막으로 각 값이 어떤 판단을 지원할 수 있는지 이름을 붙입니다. HSB나 HSL은 편집 방향을 설명할 수 있습니다. HEX나 RGB는 디지털 토큰을 고정합니다. Delta E는 명시된 공식 아래 두 색의 차이를 요약합니다. WCAG 대비는 전경과 배경의 상대 휘도와 정의된 성공 기준을 사용합니다. 어느 출력도 다른 출력을 자동으로 대신하지 않습니다. 신뢰할 수 있는 기록에는 원본 색, 모델, 변환 값, 표시 맥락, 평가 방법, 최종 규칙의 소유자, 다음 행동이 포함됩니다. 숫자뿐 아니라 그 숫자가 증명하는 범위와 증명하지 못하는 범위도 함께 전달해야 합니다.
모델 혼동을 막는 5단계 색상 작업 흐름
피커, 스크린샷, 디자인 파일의 색을 코드나 공유 팔레트로 옮길 때 이 순서를 사용하세요.
1. 모델 이름 기록
라벨 없는 세 숫자 대신 HSB, HSV, HSL, RGB 등 정확한 모델을 값 옆에 씁니다.
2. 원본 보존
승인 토큰이나 원본 파일을 남기고 색이 샘플링, 변환, 시각 제작 중 어떻게 얻어졌는지 기록합니다.
3. RGB 또는 HEX 저장
다른 앱이 모델을 추측하지 않고 같은 sRGB 채널을 재현할 수 있도록 변환 결과를 저장합니다.
4. 실제 맥락 확인
실제 크기, 테마, 주변색, 상태, 대상 화면에서 색을 보고 승인합니다.
5. 알맞은 검사 실행
대비, Delta E, 인쇄 측정, 프로젝트 규칙처럼 해당 결정을 담당하는 방법을 사용합니다.
Smith · W3C · Adobe
일차 자료와 플랫폼 정의
초기 HSV/HSL 변환, 현재 HSB 피커, 브라우저 HSL 구문, 별도의 대비 규칙을 확인할 수 있는 자료입니다.
모델을 비교하고 실제 색으로 확인하기
HSB, HSV, HSL 자주 묻는 질문
HSB와 HSV는 언제나 동일한가요?
대체로 같은 모델이며 Brightness와 Value는 다른 이름입니다. 정확히 옮기기 전 앱 문서, 범위, 프로필, 반올림을 확인하세요.
HSB 밝기 100%와 HSL 명도 100%가 왜 다른가요?
HSB는 밝기 100%에서 완전 채도의 순색을 만들 수 있습니다. HSL은 명도 100%를 흰색으로 정하고 순색을 50%에 둡니다.
CSS에서 HSB나 HSV를 직접 쓸 수 있나요?
CSS Color에는 hsl()이 있지만 표준 hsb()나 hsv() 함수는 없습니다. 고른 색을 HEX, RGB, HSL 등 지원 형식으로 변환하세요.
컬러 피커에는 어떤 모델이 가장 좋은가요?
색상 띠와 채도·밝기 면에는 HSB/HSV가 흔합니다. CSS 변형에는 HSL이 더 읽기 쉬울 수 있습니다. 작업 목적과 정확한 출력 기록을 우선하세요.
HSB나 HSL 밝기가 같으면 대비도 같은가요?
아닙니다. 어느 채널도 WCAG 대비 비율이 아닙니다. 실제 전경과 배경을 상대 휘도 방식으로 평가하세요.