OKLCH 이해하기: 정말로 의미가 있는 색공간

왜 어떤 색상 조합은 자연스럽게 느껴지는 반면 다른 조합들은 눈이 도망치고 싶게 만드는지 궁금해 본 적이 있나요?

그것은 마법이 아닙니다. 타고난 재능도 아니고요. 그것은 수학입니다—구체적으로는, 우리 눈이 실제로 색상을 어떻게 인지하는지에 대한 수학입니다.

수십 년 동안 우리는 인간이 아닌 컴퓨터를 위해 설계된 색상 시스템인 RGB와 HSL에 갇혀 있었습니다. 하지만 OKLCH가 모든 것을 바꿉니다.

직접 문제를 확인해보세요

간단한 데모부터 시작해봅시다. HSL에서 세 개의 다른 색상을 동일한 "밝기" 값으로 설정하면, 그것들이 똑같이 밝아 보여야 하겠죠?

위의 두 시스템 사이를 전환해보세요. 뭔가 눈에 띄나요? HSL 모드에서는 세 색상이 모두 50% 밝기로 설정되어 있음에도 불구하고 녹색이 압도적으로 두드러집니다. OKLCH 모드에서는 실제로 균형 잡혀 보입니다.

이것이 수학적 동등성과 시각적 동등성의 차이입니다.

OKLCH가 정말 무엇인가요?

OKLCH는 OK Lightness Chroma Hue의 약자입니다. "OK" 부분은 OKLCH의 기반이 되는 OKLab 색공간을 개발한 Björn Ottosson에서 따온 것입니다.

특별한 이유는 다음과 같습니다:

L (Lightness/밝기): 의미 있는 밝기

HSL의 가짜 밝기와 달리, OKLCH 밝기는 실제로 당신의 눈에 얼마나 밝게 보이는지와 일치합니다. L=50%는 정말로 L=100%의 절반만큼 밝게 보입니다.

C (Chroma/채도): 거짓 없는 채도

채도는 색상이 회색에서 얼마나 멀리 떨어져 있는지를 측정합니다. 동일한 채도 값 = 색조에 관계없이 동일하게 인지되는 채도.

H (Hue/색조): 수정된 색상환

HSL과 같지만, 디스플레이 기술이 아닌 인간의 인지에 따라 배열되었습니다.

RGB와 HSL이 부족한 이유

RGB: 기계를 위해 구축됨

RGB는 1950년대 CRT 모니터를 위해 설계되었습니다. 얼마나 많은 빨강, 녹색, 파란색 빛을 방출할지를 설명하는 것이지—인간에게 색상이 실제로 어떻게 보이는지가 아닙니다.

문제점: rgb(0, 255, 0)과 rgb(255, 0, 0)은 수학적으로 동일한 "강도"를 가지지만, 녹색이 극적으로 더 밝게 보입니다.

HSL: 고귀한 시도

HSL은 색조, 채도, 밝기를 분리하여 더 인간 친화적이 되려고 시도했습니다. 좋은 아이디어였지만, 실행에 결함이 있었습니다.

문제점: HSL 밝기는 단지 위장한 RGB일 뿐입니다. 우리 눈이 실제로 다른 색상들을 어떻게 인지하는지를 고려하지 않습니다.

OKLCH가 모든 것을 해결하는 방법

OKLCH는 수십 년간의 색채 과학 연구 위에 구축되었습니다. 디스플레이 기술이 아닌 인간의 시각을 중심으로 설계되었습니다.

지각적 균일성

색공간의 성배입니다. OKLCH에서 수학적 거리는 시각적 차이에 대응합니다. 두 색상이 수치적으로 두 배 멀리 떨어져 있으면, 당신의 눈에는 두 배 다르게 보입니다.

엉망이 되지 않는 그라디언트

RGB 그라디언트가 중간에서 종종 탁하게 보이는 것을 눈치챈 적이 있나요? 그것은 RGB 보간이 당신의 눈이 기대하는 경로를 따르지 않기 때문입니다.

차이는 놀랍습니다. RGB 그라디언트는 인간의 인지와 싸웁니다. OKLCH 그라디언트는 그것과 함께 작동합니다.

실제 세계의 이점

예측 가능한 색상 팔레트

똑같이 중요해 보이는 다섯 개의 색상을 원하나요? 동일한 L과 C 값으로 설정하고, H만 변경하세요. 완료입니다.

쉬워진 접근 가능한 디자인

텍스트 대비를 보장해야 하나요? OKLCH 밝기는 실제로 인지되는 밝기에 대응하므로, 접근성 계산이 의미 있게 됩니다.

미래 대응 색상

OKLCH는 특정 디스플레이 기술에 묶여 있지 않습니다. 인간이 보는 대로 색상을 설명하므로, 아직 발명하지 않은 화면에서도 관련성이 있습니다.

가장 좋은 부분: 이미 여기에 있습니다

OKLCH는 이론적인 미래 기술이 아닙니다. 다음에서 지원됩니다:

• Chrome 111+ (2023년 3월)
• Firefox 113+ (2023년 5월)
• Safari 15.4+ (2022년 3월)

이는 오늘날 웹 사용자의 95% 이상입니다.

시작하기

구문은 놀랍도록 간단합니다:

/* OKLCH 구문 */
color: oklch(60% 0.15 240);

/* RGB와 비교 */
color: rgb(57, 130, 246);

어느 것이 실제 색상에 대해 더 많이 알려주나요? OKLCH로는 값들을 읽을 수 있습니다:

• 60% 밝기
• 0.15 채도
• 240° 파란색 색조

RGB로는? 그 세 숫자가 어떻게든 파란색을 만든다는 것을 믿어야 할 뿐입니다.

왜 이것이 중요한가

색상은 디자인에서 가장 강력한 도구 중 하나입니다. 기분에 영향을 주고, 주의를 이끌며, 의미를 전달합니다.

너무 오랫동안 우리는 고장난 도구들—인간의 인지와 일치하지 않는 색상 시스템들로 작업해왔습니다. OKLCH가 그 근본적인 불일치를 해결합니다.

결과? 더 예측 가능하고, 더 일관성 있고, 더 효과적인 색상 선택.

OKLCH의 혜택을 받기 위해 색상 전문가가 될 필요는 없습니다. 기계 대신 인간을 위해 설계된 색상 시스템을 사용하기 시작하기만 하면 됩니다.

웹에서 색상의 미래에 오신 것을 환영합니다. 그것이 당신을 기다리고 있었습니다.