[CSS] Hue, Saturation, and Lightness

안녕하세요 동기 여러분! 오늘은 색을 나타나는 또 하나의 방법 HSL에 대해 알아봅시다!

 

HSL

HSL 무슨 총 이름 같이 생겼는데 색을 나타내는 CSS의 기능입니다.

Hue는 색깔, 빛깔, 색조, Saturation은 포화도, Lightness는 밝기라는 의미를 가지고 있습니다. 

 

---

 

생김새와 정의

color: hsl(50, 70%, 30%);

• hsl바로 옆에 나오는 숫자가 바로 hue의 값입니다. hue는 0부터 360까지의 색을 가지고 있는데 빨강 계열은 0, 노랑 계열은 60 초록 계열은 120 파랑 계열은 240, 다시 빨강 계열은 360에 가까울수록 비슷한 색이 나옵니다.
• 두 번째로 나오는 퍼센트의 값이 saturation의 값입니다. saturation이 여기서는 '채도'입니다. 채도는 색의 선명도를 나타냅니다.  값이 낮을 수록 회색에 가까워지고 밝을수록 색이 진해집니다.
• 세 번째로 오는 퍼센트의 값은 Lightness로 밝기입니다. 대체로 50%가 보통 밝기입니다. 100%에 가까워질 수록 하얀색에 가까워지고 0%에 가까워질수록 검게 변합니다.

 

---

 

해봅시다.

div {
  background-color: hsl(0, 100%, 30%);
  width: 200px;
  height: 200px;
}

 

여기서 흰색을 만드려면 밝기를 100으로 올리면 되겠죠?

div {
  background-color: hsl(0, 100%, 100%);
  width: 200px;
  height: 200px;
  border: 3px solid black;
}

 

검은색을 만드려면 밝기를 0으로

div {
  background-color: hsl(0, 100%, 0%);
  width: 200px;
  height: 200px;
}

 

 

회색을 만드려면 밝기는 보통 밝기로 채도를 0으로

div {
  background-color: hsl(0, 0%, 50%);
  width: 200px;
  height: 200px;
}

 

 

---

 

오늘의 느낌

그럼 지금 색을 표현할 수 있는 방법을 벌써 네 가지나 알고 있는 거잖아? 대박...!