This post is not yet available in English and is shown in Korean.
내가 빨간색이라 생각했던 것보다 더 빨간색이 있음이 흥미로웠다.
색을 표현할 때 rgb 형식을 자주 사용한다. 빛의 삼원색을 적당한 비율로 섞어 색을 표현하는 방식이다.
rgb(249, 224, 0) / #F9E000
249
224
0
하지만 헥스값만 보고 어떤 색인지 알기 쉽지 않다. 아래 퀴즈를 통해 테스트해보자.
#730AB2에 해당하는 색은?
색을 선택하세요
그래서 rgb를 더 쉽게 표현하기 위해 hsl 형식이 등장했다. hsl 형식은 색상, 채도, 명도로 색을 표현한다. 사람이 색을 떠올리는 방식과 바로 대응된다. 그래서 한 축만 바꿨을 때 “밝게/어둡게, 진하게/연하게” 같은 의도가 코드에 그대로 드러난다.
hsl(0deg 100% 50%)
0
100
50
아래 퀴즈를 풀어보자. (여전히 어렵긴하다 ㅎ)
hsl(151, 46%, 34%)에 해당하는 색은?
색을 선택하세요
hsl는 rgb를 기하학적으로만 바꾼 것이기 때문에 사람 눈의 특성을 고려하지 않았다는 단점이 있다. 위 hsl 슬라이더에서 saturation과 lightness를 고정하고 hue를 조절해보자. 같은 밝기값인데 노란색은 밝게, 파란색은 어둡게 보일 것이다.
인간이 색을 인지하는 방식을 반영하여 만들어진 색상 표현 방식이다. tailwind나
shadcn/ui 등등 웹개발에서 마주치던 oklch 표현이 lch의 개선판이다.
oklch(0.7 0.2 0)
0.7
0.2
0
chroma와 lightness를 고정한 채 hue를 조절하면 일정한 밝기로 보임을 알 수 있다.
RGB와 LCH는 단순한 표현 방식의 차이만이 아니라, 전제가 되는 색공간의 성격 자체가 다르다. 우리가 CSS에서 사용하는 RGB는 실제로는 sRGB라는 출력용 색공간의 표현이고, LCH는 LAB이라는 지각 기반 참조 색공간을 사람이 다루기 쉽게 표현한 좌표계다.
sRGB 색공간은 1990년대 모니터 성능을 기준으로 설계되었기 때문에 색역이 비교적 좁다. 이 안에서 rgb(255,0,0)은 “빨강 채널이 최대”라는 뜻일 뿐, 사람이 인식할 수 있는 가장 강한 빨강을 의미하지는 않는다.
#ff0000
반면 LAB 색공간은 특정 디스플레이에 묶이지 않은 사람 시각 기준의 참조 색공간으로, sRGB보다 이론적으로 더 넓은 색 범위를 포함한다. LCH는 이 LAB 색공간을 밝기·채도·색상 축으로 표현한 것이기 때문에, sRGB RGB로는 담을 수 없는 더 강한 빨강 좌표를 가질 수 있고, 이로 인해 RGB의 빨강이 상대적으로 덜 빨갛게 느껴진다.
지원하는 환경에서는 아래와 같이 더 강한 빨강을 표현할 수 있다.
oklch(0.649 0.299 29.0)
물론 이 역시 디스플레이 색역의 한계로 인해 사람이 인식할 수 있는 최대 빨강은 아니지만, sRGB보다 더 넓은 색 영역을 실제로 표현할 수 있다는 점에 의미가 있다.
표현 방식은 중립적이지 않다. 어떤 색공간을 쓰느냐는 우리가 색을 어디까지 인식하고 조작할 수 있는지의 경계를 함께 정한다.