[CSS 색상 지정 팁] HSL의 속성을 변수로 만들어 활용하기

HSL

HSL은 아래 색을 표현하는 색상, 채도, 명도의 앞글자들입니다.

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

 

Saturation : 채도
- 0 ~ 100 %  (% 단위 필수)

 

Lightness : 명도
- 0 ~ 100 %  (% 단위 필수)
- 0%는 검은색, 50 %는 보통, 100%는 흰색

 

HSL 문법

hsl (100, 100%, 50%)   /* #5f0 */

hsl (235, 100%, 50%, .5)   /* #0015ff with 50% opacity */

hsl (235 100% 50%);   /* CSS Colors 4 space-separated values */

 

활용 예제

<style>
    :root{
        --hue:204;
        --saturation: 100%;
        --lightness : 30%;
    }
    .card {width: 300px; height: 300px; color: azure; 
        background: hsl(var(--hue) var(--saturation) var(--lightness) / .95 )}
    .on {--hue:360;}
</style>

<div class="card"> card</div>
<div class="card on"> on </div>

 

소스 테스트

https://codepen.io/chopie80/pen/BayBJXr

 

강의 영상