CSS hsl() 함수
예시
다양한 HSL 색상 정의:
#p1 {background-color:hsl(120,100%,50%);} /* green */
#p2 {background-color:hsl(120,100%,75%);} /* light green */
#p3 {background-color:hsl(120,100%,25%);} /* dark green */
#p4 {background-color:hsl(120,60%,70%);} /* pastel green */
정의 및 사용
hsl() 함수는 색조 채도 밝기 모델(HSL)을 사용하여 색상을 정의합니다.
HSL은 색조, 채도 및 밝기를 나타내며 색상의 원통형 좌표 표현을 나타냅니다.
버전: | CSS3 |
---|
브라우저 지원
표의 숫자는 기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Function | |||||
---|---|---|---|---|---|
hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS 구문
hsl(hue, saturation, lightness)
Value | Description |
---|---|
hue | Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue |
saturation | Defines the saturation; 0% is a shade of gray and 100% is the full color (full saturation) |
lightness | Defines the lightness; 0% is black, 50% is normal, and 100% is white |