css에서 색을 표기하는 방식은 여러가지가 있습니다. 그 중에 HSL에 대해서 알아보겠습니다.
HSL은 색을 표현하는 방식 중 하나입니다. HSL은 Hue, Saturation, Lightness의 약자입니다. 각각 색상, 채도, 명도를 나타냅니다.
색상은 0~360의 각도로 표현합니다. 0은 빨간색, 120은 초록색, 240은 파란색을 나타냅니다.
채도는 0~100%로 표현합니다. 0%는 회색, 100%는 색이 가장 진한 상태를 나타냅니다.
명도는 0~100%로 표현합니다. 0%는 검정색, 100%는 흰색을 나타냅니다.
HSL은 다음과 같이 사용합니다.
hsl(색상, 채도, 명도)예를 들어, 빨간색을 표현하고 싶다면 다음과 같이 사용합니다.
강렬함: hsl(0, 100%, 50%)
덜 강렬함: hsl(0, 50%, 50%)
나약함: hsl(0, 10%, 50%)
세상 밝음: hsl(0, 100%, 100%)
밝음: hsl(0, 100%, 70%)
어둠: hsl(0, 100%, 10%)
그런데, 색상은 알겠는데, 채도, 명도라는 것이 무엇인지 알 필요가 있었습니다. (위키백관에서 가져옴)
채도(Saturation): 색이 보다 선명할수록 채도가 높다고 말하며 회색이나 흰색 또는 검정과 같은 무채색에 가까울수록 채도가 낮다고 말한다. 채도가 높은 색을 말할 때는 흔히 '짙다'고 표현하고, 반대로 채도가 낮은 색을 말할 때는 흔히 '흐리다'는 표현을 사용한다. 예를 들어 짙은 노랑, 흐린 노랑과 같이 표현할 수 있다.
명도(Lightness의): 색의 밝고 어두운 정도를 말한다. 명도가 높은 색을 말할 때는 흔히 '밝다'고 표현하고, 반대로 명도가 낮은 색을 말할 때는 흔히 '어둡다'는 표현을 사용한다. 예를 들어 밝은 노랑, 어두운 노랑과 같이 표현할 수 있다.