HSL

HSL/HSLA

색상은 원으로 설정되어있으며, 원의 둘레에 따라 색상이 순환된다.

Hue, Saturation, Lightness 3가지 요소로 색상을 나타낸다.

색상의 다른 표현 방식인 hex color, rgb 방식보다 색상을 인식하고 다루기에 더 직관적이고 쉽게 느껴진다.

• Hue(색상) → 0도 ~ 360도 값으로 색상을 나타낸다. 0도는 빨간색, 120은 녹색, 240은 파란색

• Saturation(채도) → 색상의 진한 정도를 나타낸다. 0%(무채색) ~ 100%

• Lightness(명도) → 색상의 밝은 정도를 나타낸다. 0%(검정) ~ 50%(기본) ~ 100%(흰색)

• Alpha(불투명도, optional) → HSL 대신 HSLA를 사용하면 색의 불투명도를 제어할 수 있다.

body {
  background-color: hsl(270, 100%, 50%);
  /* alpha(투명도)도 조절 가능
  background-color: hsla(270, 100%, 50%, 100%)
  */ 
}