[func] CSS - hsl() 함수 - (색조, 채도, 밝기)로 색상 정의. (= hsl함수 = 에이치에스엘함수/흐슬함수)

1. hsl() 예제 - (색조,채도,밝기) 이용해 색상 정의
2. hsl() 정의
3. 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%는 흰색