0

인코딩 결과

HSL 색상

HSL 색상 정보

HSL 색상은 색상, 채도, 명도로 색을 표현하는 색 모델입니다. 빨강, 초록, 파랑 빛의 세기를 직접 지정하는 RGB와 달리 HSL은 색감, 선명함, 밝기를 분리하므로 색 조정과 CSS 디자인 작업에 자주 사용됩니다.

성분의미값 예
H: 색상색감을 각도로 나타냅니다. 빨강은 0deg, 초록은 120deg, 파랑은 240deg 부근입니다.90deg
S: 채도색의 선명함을 나타냅니다. 0%는 무채색, 100%는 가장 선명한 색입니다.50%
L: 명도색의 밝기를 나타냅니다. 0%는 검정, 50%는 일반적인 밝기, 100%는 흰색입니다.50%

예를 들어 빨강과 같은 주요 색은 다음과 같이 나타낼 수 있습니다.

색HSL 표기RGB 표기
빨강hsl(0deg 100% 50%)rgb(255 0 0)
초록hsl(120deg 100% 25.1%)rgb(0 128 0)
라임hsl(120deg 100% 50%)rgb(0 255 0)
파랑hsl(240deg 100% 50%)rgb(0 0 255)
흰색hsl(0deg 0% 100%)rgb(255 255 255)
검정hsl(0deg 0% 0%)rgb(0 0 0)

투명도를 포함하려면 알파 값을 추가합니다. 예를 들어 반투명 빨강은 hsl(0deg 100% 50% / 0.5) 와 같이 나타낼 수 있습니다.

입력에서는 hsl(0deg 100% 50%) 같은 공백 구분 표기와 hsl(0deg, 100%, 50%) 같은 기존 쉼표 구분 표기를 사용할 수 있습니다.

색상, 채도, 명도의 처리

색상은 각도로 처리하며, 360deg를 넘는 값이나 음수 값은 0deg부터 360deg 범위로 정규화합니다. 예를 들어 hsl(360deg 100% 50%) 는 hsl(0deg 100% 50%) 와 같은 색으로, hsl(-120deg 100% 50%) 는 hsl(240deg 100% 50%) 와 같은 색으로 처리됩니다.

채도와 명도는 0%부터 100%까지의 범위로 처리합니다. 채도가 0%이면 색상과 관계없이 회색 계열의 무채색이 됩니다. 명도가 0%이면 검정, 100%이면 흰색이 됩니다.

HSL과 RGB의 차이

RGB는 빨강, 초록, 파랑 성분을 직접 지정하므로 화면 표시나 이미지 데이터에 가까운 표현입니다. HSL은 색상, 채도, 명도를 분리하므로 “같은 색상으로 더 밝게 만들기” 또는 “채도만 낮추기” 같은 조정이 쉽습니다.

다만 HSL은 사람의 지각에 완전히 균일한 색 공간은 아닙니다. 눈에 보이는 밝기나 색 차이를 더 쉽게 다루려면 Lab, LCH, Oklab, Oklch 같은 색 공간을 사용할 수 있습니다.