본문 바로가기

Tech-tips/CSS3

CSS3의 HLSA 색상이 멋진 이유

CSS3의 HLSA 색상이 멋진 이유


CSS에서 사용되는 색상은 hex 코드, rgb(a), 그리고 색상 명이 있다. hex 코드는 웹 뿐만 아니라 워낙에 광범위 하게 쓰이고 있다 보니 따로 설명할 필요가 없다고 본다. rgb 같은 경우에는 IE7 이하는 alpha 필터를 별도로 지정해줘야 하기 때문에 rgba 속성은 쓸 수가 없다. 색상 명은 w3c 표준으로 지정된 몇 개의 색상 명이 있는데 이것들은 이름만 적으면 바로 사용할 수 있다. 


그런데 이번에 새로 등장한 CSS3에서 추가된 색상 표기 방법 중에 HLSA라는 것이 추가 되었다. 이것은 무엇일까? 


HLSA는 Hue Lightness Saturation Alpha의 약자이다. 각각의 항목을 설명해보자면, H는 색조, L은 명도, S는 채도, A는 투명도를 뜻한다. 기존의 rgba 컬러가 rgb 속성에 alpha가 추가 된것이라면 HLSA 컬러는 처음 부터 alpha 속성을 지원하는 색상이다. 


photoshop HSB

참고로 포토샵은 rgb 방식과 HLS 방식을 병용하여 사용하고 있다. 포토샵의 색상 피커 툴을 보면 hlsa 색상의 구조가 바로 이해 가리라고 본다. 참고로 포토샵은 L대신 B(Brightness)라는 이름으로 밝기 수치를 사용하고 있다. 


실제 CSS에서 HLSA 컬러는 다음과 같이 표기를 한다. (A값을 빼고 HLS만 표기해도 무방하다. )


color: hsla(30, 96%, 52%, 1.0);


HLSA 색상은 H의 경우 도수 (0~360) L과 S는 백분율로 되어있다. 


기존의 rgb컬러는 빨,녹,파의 혼합 비율을 설정해줘야 하는데, 이게 여간 까다로운게 아니라서 실제로 코드표만 가지고 색상을 맞추는 사람은 없다. 이는 핵스코드도 마찬가지 인데, 핵스코드만 가지고 이게 도무지 무슨 색상인지 감이 안오는 경우가 흔하다. 


그러나 HLSA 컬러는 이 직관성 부분에서 크게 점수를 많이 얻을 수 있다. 왜냐면 색조와 밝기, 채도가 각각 별개의 항목이기 때문에 이 빨간색을 쓰고 싶은데 약간 어두웠으면/채도가 낮았으면 좋겠다 라는 생각을 할때가 많다. 핵스나 rgb는 포토샵 같은 프로그램을 켜서 다시 색상을 찍어서 쓰는게 편하지만 HLSA 컬러 기반으로는 L이나 S수치만 조정하면 간단하게 명도나 채도를 조절할 수 있는 것이다. 


필자가 이전에 HLSA 색상을 몰랐을때는 미세한 명도 조절은 Compass의 기본 기능인 연산을 이용해서 사용하곤했다. 그래서 SCSS에 #ddd - 10 같은 수치를 쓰곤 했는데, HLSA 코드를 적용한 뒤로는 거의 쓰지 않고 있다. 


보통 색을 아무렇게나 떡칠하지 않는다면 비슷한 톤의 색상을 밝기만 다르게 해서 사용하기 마련이다. 그런 점에서 명도나 채도를 세밀하게 조절할 수 있는 HLSA은 정말 편하게 웹 디자인을 돕는 색상 코드인 것이다. 


물론 HLSA는 IE9이상 부터 지원되기 때문에 이전 브라우저는 이 색상 코드를 읽을 수 없다. 변환 툴을 이용해서 rgb나 HEX 코드로 바꿀 수 있지만 여간 귀찮은게 아니기 때문에 필자 처럼 쿨하게 무시하는 것을 추천한다. 


*현재 본 블로그의 일부 색상은 HLSA 코드로 작성되어있다.