🔅 HEX ↔ HSB 변환기 | HSL 값과 나란히 변환

변환 방향

HEX 색상 코드

웹에서 쓸 색상값 (hsb() 함수는 CSS에 없음)

HSB의 B와 HSL의 L은 다른 값이다

포토샵과 피그마의 색 선택창이 쓰는 HSB는 HSL과 이름이 비슷하지만 세 번째 값의 정의가 다른 색공간입니다. 그래서 같은 색을 디자인 도구에서 읽은 숫자와 웹 코드에 적는 숫자가 어긋나 보입니다. 이 변환기는 HEX와 HSB를 양방향으로 바꾸면서 같은 색의 HSL 값을 나란히 보여 주고, 두 값이 왜 다른지 근거가 되는 채널까지 함께 적습니다.

세 채널 중 가장 큰 값을 M, 가장 작은 값을 m 이라 할 때 HSB의 밝기 B는 M 그대로이고, HSL의 명도 L은 M과 m 의 중간값입니다. 색상각은 양쪽이 같습니다. 순수 빨강을 넣어 보면 B는 100%, L은 50%로 갈립니다. 2026년 10월 기준 W3C CSS Color 규격에는 hsb() 나 hsv() 함수가 없어 웹에서는 HEX나 hsl() 을 써야 합니다.

채도가 0인 무채색은 기준이 되는 최대 채널을 고를 수 없어 색상각이 정의되지 않으므로 0으로 적습니다. HEX는 채널당 8비트라 HSB를 거쳐 돌아오면 소수점 아래에서 반올림 차이가 생길 수 있습니다. OKLCH 변환과 팔레트 생성은 지원하지 않습니다.

자주 묻는 질문

HSB와 HSL은 어떻게 다른가요?

세 번째 값의 정의가 다릅니다. HSB의 B는 가장 큰 채널 값 그대로이고, HSL의 L은 가장 큰 채널과 가장 작은 채널의 중간값입니다. 그래서 순수 빨강은 HSB에서 B가 100%, HSL에서 L이 50%로 나옵니다.

CSS에 hsb() 함수를 쓸 수 있나요?

CSS에는 hsb() 나 hsv() 함수가 없습니다. 디자인 도구에서 읽은 HSB 값을 웹에 옮길 때는 같은 색의 hsl() 값이나 HEX를 쓰셔야 하므로 결과에 함께 보여 줍니다.

회색을 넣으면 색상각이 0으로 나옵니다.

채도가 0이면 색상각은 정의되지 않습니다. 세 채널이 모두 같아 기준이 되는 최대 채널을 고를 수 없기 때문이며, 이 경우 0으로 적고 무채색임을 표시합니다.

🔅HEX ↔ HSB 값 변환기

관련된 도구

OKLCH 색상 코드 변환기

HEX/RGB/HSL 컬러 변환기

HSB의 B와 HSL의 L은 다른 값이다

자주 묻는 질문

관련된 도구

OKLCH 색상 코드 변환기

HEX/RGB/HSL 컬러 변환기

HSB의 B와 HSL의 L은 다른 값이다

자주 묻는 질문

같은 카테고리 도구