목차
- hsl() 예제 - (색조,채도,밝기) 이용해 색상 정의
- hsl() 정의
- hsl() 구문
hsl() 예제 - (색조,채도,밝기) 이용해 색상 정의
<style>
p {padding:15px; background-color:hsl(0,100%,50%);}
</style>
<p>빨강</p>
결과보기
hsl() 정의
HSL (Hue-Saturation-Lightness 모델) 사용해 원통형 좌표로 색상 정의.
1.
- Hue : 색상
- Saturation : 채도
- Lightness : 명도
2. cf.
hsla() 함수 - (색상/채도/명도/불투명도)로 색상코드 정의. ※ hsl() 함수의 별칭.
3.
- CSS3
- IE 9 이상 주요 최신 브라우저 지원.
4. MDN hsl() 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
hsl() 구문
hsl(hue, saturation, lightness)
[매개변수]
hue
색상 (= 색조 = 색깔)
- 0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재)
- 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색
saturation
채도 (= 컬러 정도)
- 0 ~ 100 % (% 단위 필수)
- 0%는 음영, 100%는 컬러 최대치
lightness
명도 (= 밝기)
- 0 ~ 100 % (% 단위 필수)
- 0%는 검은색, 50 %는 보통, 100%는 흰색