• Q&A
  • 회원가입
  • 로그인

[func] CSS - 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.

CSS3

 

3.

IE9 이상 주요 최신 브라우저 지원


 

 

hsl() 구문


hsl(hue, saturation, lightness)

 


[매개변수]


hue

색상 (= 색조 = 색깔)
※ 0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재)
※ 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색


saturation 

채도 (= 컬러 정도)

※  0 ~ 100 %  (% 단위 필수)
※ 0%는 음영, 100%는 컬러 최대치


lightness

명도 (= 밝기)
※  0 ~ 100 %  (% 단위 필수)

※ 0%는 검은색, 50 %는 보통, 100%는 흰색

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012