[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; bac...

원문링크 : [CSS 색상] HSL의 속성을 변수로 만들어 활용하기