눈에 보이는 그대로의 컬러 시스템
몇 주 전 빨간색 계열의 컬러를 찾으려고 Tailwind v4 문서를 훑어보고 있었습니다. 그때 이 코드를 발견했습니다.
--color-red-500: oklch(0.637 0.237 25.331);
Hex도 HSL도 아닌 완전히 처음 보는 형식이었습니다. 저는 잠시 멈춰 서서 제가 무엇을 보고 있는지 분석해 보았습니다. 당시 10년 넘게 디자인 토큰을 만들어 왔음에도 이 구문은 전혀 알아볼 수 없었습니다.
전에도 OKLCH라는 이름을 들어본 적은 있었습니다. 냉장고에 냉동실이 있다는 사실을 무의식적으로 인지하듯 딱히 깊게 생각해 본 적 없는 정보였습니다. 그런데 이제 세계에서 가장 인기 있는 CSS 프레임워크가 모든 팔레트 컬러의 기본값으로 이 형식을 채택했습니다. 공지사항이나 트위터 게시글은 없었습니다. 변화에 대해 양해를 구하는 마이그레이션 가이드조차 없었습니다. 그저 새로운 값들이 원래 그 자리에 있었던 것처럼 무심하게 놓여 있을 뿐이었습니다. 저는 페이지를 닫고 커피 한 잔을 내렸습니다. 그러고는 다음 3일 동안 이 형식에 대해 찾을 수 있는 모든 자료를 탐독했습니다.
모든 디자이너가 알고 있지만 아무도 입 밖으로 내지 않는 사실이 있습니다.
HSL은 결함이 있는 컬러 모델입니다.
밝기(Lightness) 50%의 노란색을 고르고, 똑같은 밝기 50%의 파란색을 골라 두 색을 비교해 보십시오. 노란색은 밝게 빛납니다. 반면 파란색은 거의 검은색에 가깝습니다. 두 색상 모두 L값은 동일합니다.
모니터 고장이 아닙니다. 이것이 바로 설계된 대로 작동하는 HSL의 본모습입니다. HSL의 밝기 척도는 R, G, B 채널의 최솟값과 최댓값 사이를 수학적으로 계산한 중간 지점일 뿐입니다. 실제 우리 눈에 색이 얼마나 밝게 보이는지와는 아무런 상관이 없습니다.