OKLCH 색 공간

정의

OKLCH는 사람 눈에 실제로 보이는 밝기를 기준으로 색을 다루는 최신 색 모델입니다. 이름의 세 글자는 색을 이루는 세 가지 값을 뜻하는데, L은 명도(밝기), C는 채도(색의 선명함), H는 색상(빨강, 파랑 같은 색의 종류)입니다. 세 값으로 색을 표현한다는 점에서 널리 쓰이는 HSL과 구조가 비슷해 익히기 어렵지 않습니다. 결정적인 차이는 명도 L이 지각적으로 균일하다는 데 있습니다. 즉 L값이 같으면 색상이 달라도 사람 눈에 실제로 비슷한 밝기로 보인다는 뜻입니다. 최신 브라우저에서 oklch() 함수로 곧바로 쓸 수 있습니다.

왜 중요한가

HSL에는 오래된 골칫거리가 하나 있습니다. 밝기 값을 똑같이 맞춰도 노랑이 파랑보다 훨씬 밝아 보인다는 점입니다. 그래서 HSL로 색 단계를 만들면 숫자상으로는 고르게 나눴는데도 눈으로 보면 어떤 색은 튀고 어떤 색은 묻혀, 결과를 예측하기가 어렵습니다. OKLCH는 명도가 지각적으로 균일하기 때문에 L값만 고정하면 색상이 달라도 실제로 비슷하게 밝습니다. 덕분에 버튼의 여러 상태 색이나 색의 밝기 단계, 다크 모드 팔레트처럼 여러 색을 일관된 밝기로 맞춰야 하는 작업에서 훨씬 예측 가능하고 규칙적인 결과를 얻을 수 있습니다. 색을 감이 아니라 규칙으로 다루고 싶은 사람에게 특히 든든한 도구입니다.

흔한 실수

• OKLCH를 HSL과 똑같다고 여겨 값을 그대로 옮기는 것입니다. 두 모델은 값의 범위와 의미가 서로 달라, HSL 값을 그대로 넣으면 전혀 엉뚱한 색이 나옵니다. 이름이 비슷하다고 방심하지 말고, 새로운 색 모델이라 여기며 처음부터 다시 잡아야 합니다.
• 채도 C를 지나치게 높게 주는 것입니다. 색상과 밝기에 따라 화면이 표현할 수 있는 채도의 한계가 다른데, 이를 넘기면 브라우저가 색을 임의로 잘라내 의도와 다른 색이 나올 수 있습니다.
• 낯설다는 이유로 OKLCH를 아예 쓰지 않고 미루는 것입니다. 값의 의미만 한번 익히면 색 단계를 만드는 일이 오히려 쉬워지니, 작은 팔레트부터 시험 삼아 적용해 보는 편이 좋습니다.

실무 팁

• 색의 밝기 단계나 다크 모드 팔레트를 만들 때 L값을 규칙적으로 나누세요. 명도가 지각적으로 균일하므로, L만 일정하게 조절하면 색상이 달라도 실제로 비슷하게 밝은 단계가 나와 예측 가능한 팔레트를 얻습니다.
• 최신 CSS 문법이므로 oklch()를 쓸 때는 구형 브라우저를 위한 대비책을 함께 두세요. @supports로 지원 여부를 확인하거나 기존 색 값을 먼저 선언해 두면, 지원하지 않는 환경에서도 화면이 깨지지 않습니다.
• 강조 색을 한 벌 정해 두고 L과 C만 조금씩 바꿔 여러 상태 색을 파생하세요. 색상 H는 고정한 채 밝기와 채도만 조절하면, 버튼의 기본과 호버, 눌림 상태처럼 서로 이어지는 색을 통일감 있게 손쉽게 만들 수 있습니다.

관련 개념