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
강의 영상
'개인공부' 카테고리의 다른 글
UX/UI 디자이너가 성장하는 방법 7가지 (0) | 2021.10.13 |
---|---|
UX 디자인을 위한 7가지 원칙 (UX 디자인과 UI 디자인은 다른 분야이다.) (0) | 2021.10.13 |
다크테마 디자인 작업시 8가지 체크 사항 (0) | 2021.10.06 |
디자인 시스템에 대해 알아봅시다. (0) | 2021.10.06 |
[포토샵] 내용 인식 채우기, 더 확실하게 인식하게 하는 팁 (배경영역 지정하기) (0) | 2021.10.06 |
댓글