CSS에서는 같은 색을 최소 세 가지 다른 방식으로 표기할 수 있으며, 각 방식은 디자인부터 투명도 애니메이션까지 서로 다른 용도에 적합하다.
HEX: 복사하기 편한 압축 표기
#FF5733처럼 생긴 16진수 표기는 빨강, 초록, 파랑 세 채널을 각각 두 자리 숫자로 인코딩한다. 가장 압축된 형식이라 디자인 시안에서 복사해 오기는 편하지만, 숫자 조합만 보고 어떤 색인지 사람이 직관적으로 파악하기는 거의 불가능하다.
RGB: 채널에 직접 접근
rgb(255, 87, 51)은 같은 세 채널을 0~255 사이의 10진수로 표기한다. JavaScript 애니메이션에서 빨강 값만 점진적으로 늘리는 것처럼 채널 하나를 프로그래밍적으로 조작해야 할 때 편리하다.
HSL: 직관적인 색조 선택
HSL은 색조(hue, 0~360°), 채도, 명도로 색을 표현한다. 수동으로 색을 고를 때 가장 편한 형식이다 — 같은 색조를 더 어둡게 만들려면 RGB 세 채널을 전부 다시 계산할 필요 없이 명도 하나만 낮추면 된다.
알파 채널로 투명도 표현
rgba()와 hsla()는 0에서 1 사이의 투명도 값을 네 번째 파라미터로 추가한다. 최신 CSS에서는 HEX 끝에 두 자리를 더 붙여 투명도를 표현할 수도 있다 — 예를 들어 #FF573380처럼.
왜 필요한가
- 디자인 시안의 색을 원하는 CSS 형식으로 빠르게 변환한다.
- HSL을 이용해 같은 색조의 더 어둡거나 밝은 버전을 찾는다.
- 기본 색조는 그대로 두고 투명도만 추가한다.
오방색: HSL이 등장하기 훨씬 전의 색채 체계
이 도구의 색조(hue) 슬라이더가 0°부터 360°까지 연속된 원으로 색을 표현하는 것과 달리, 한국 전통 색채 체계인 오방색(五方色)은 색을 다섯 개의 독립된 방위와 결부시켜 규정한다 — 동쪽의 청(靑), 서쪽의 백(白), 남쪽의 적(赤), 북쪽의 흑(黑), 중앙의 황(黃)이다. 이 다섯 색은 음양오행 사상에 뿌리를 두고 한복, 단청(궁궐·사찰 건축의 채색), 전통 자수와 매듭 등에 지금도 쓰이는데, HSL처럼 연속적인 스펙트럼이 아니라 각 색이 고유한 상징과 방위를 가진 독립적인 범주로 다뤄진다는 점이 다르다. 예컨대 단청의 청색은 오늘날 HSL 슬라이더 어딘가의 특정 좌표가 아니라, 재료(석채 안료)와 용도에 따라 정해지는 상징적 색이었다.