OKLCH - 더 나은 웹 디자인을 위한 새로운 선택

profile image

OKLCH가 무엇인지, 기존 RGB와 HSL의 한계를 어떻게 극복하는지, 그리고 웹 디자인에서 어떻게 활용할 수 있는지 알아봅니다.

CSS

OKLCH라는 새로운 색상 공간이 등장했다. 특히 Tailwind CSS와 같은 주요 프레임워크가 이미 도입하기 시작했고, 최신 브라우저들도 지원을 하고 있다. 이 글에서는 OKLCH가 무엇인지, 기존 색상 공간방식과 어떤 차이점이 있고, 왜 등장하게 되었는지 알아보자.

색상 모델의 발전

RGB 색상 모델의 한계

RGB 색상 모델은 컴퓨터 디스플레이의 작동 방식에 맞춰 설계되어 컴퓨터 그래픽스와 웹에서 가장 널리 사용되는 방식이다. 빨강, 초록, 파랑 세 가지 채널의 값(0-255)을 조합해 색상을 표현하지만, 아래와 같은 한계가 있다.

  1. 비직관적인 색상 조작: RGB 값을 보고 어떤 색상이 나올지 예측하기 어렵다. 예를 들어, rgb(128, 57, 198)가 어떤 색상인지 맞춰보라!
  2. 비선형적 밝기: RGB에서 밝기는 세 채널의 평균이나 가중 평균으로 계산되는데, 이는 인간의 시각적 인지와 일치하지 않는다. 예를 들어, 순수한 파란색(rgb(0, 0, 255))과 순수한 초록색(rgb(0, 255, 0))은 RGB 값의 합은 같지만, 사람이 느끼는 밝기는 초록색이 훨씬 밝다.

  3. 그라디언트 문제: RGB 색상 간 그라디언트는 종종 중간에 원치 않는 회색이나 탁한 색상이 나타난다. 특히 보색 간의 그라디언트(예: 빨강→파랑)에서 이 문제가 두드러진다.
    css
    background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
  4. 제한된 색 영역: sRGB 색 영역에 한정되어 있어, 최신 디스플레이가 표현할 수 있는 더 넓은 색 영역(P3 등)을 활용할 수 없다.

HSL 색상 모델의 한계

HSL(Hue, Saturation, Lightness)은 RGB보다 직관적인 색상 모델이지만, 여전히 몇 가지 한계가 있다.

  1. 지각적 균일성 부족: HSL의 밝기(L)는 RGB와 마찬가지로 인간의 시각적 인지와 일치하지 않는다. 예를 들어, 서로 다른 색상(H)에서 동일한 밝기(L) 값을 사용해도 눈에 보이는 밝기는 다를 수 있디.
  2. 채도의 불균형: 밝기(L)에 따라 채도(S)의 효과가 달라진다. 매우 어둡거나 매우 밝은 색상에서는 채도 변화가 거의 눈에 띄지 않는다.
    HSL - Blue (Hue: 240°)

    Lightness: 10%

    S=0%
    S=50%
    S=100%

    Lightness: 50%

    S=0%
    S=50%
    S=100%

    Lightness: 90%

    S=0%
    S=50%
    S=100%
  3. 그라디언트 문제 지속: HSL도 RGB와 마찬가지로 그라디언트에서 중간 색상이 탁하게 나타나는 문제가 있다.
  4. 제한된 색 영역: HSL도 sRGB 색 영역 내에서 작동하므로, 더 넓은 색 영역의 색상을 표현할 수 없다.

색상 공간의 진화: LAB, LCH, Oklab

이러한 한계들을 극복하고자 계속해서 새로운 색상 공간 모델이 개발되었다. 더 자세한 차이점을 설명을 하기 위해선 수학적인 이야기를 해야하지만, 여기서는 하지 않겠다.

LAB

CIE LAB(또는 CIELAB)은 1976년에 국제조명위원회(CIE)에서 개발한 색상 공간이다. LAB는 인간의 시각 인지에 맞춰 설계됐으며, 세 가지 축으로 구성된다.

  • L: 밝기(Lightness), 0(검정)~100(흰색)
  • a: 초록-빨강 축, 음수는 초록, 양수는 빨강
  • b: 파랑-노랑 축, 음수는 파랑, 양수는 노랑

LCH(CIELCh)

LCH는 LAB 색상 공간을 극좌표계로 변환한 것이다. 여기서 'L'은 LAB와 동일한 밝기 값이고, 'C'는 채도(Chroma, a와 b 축의 거리), 'H'는 색상(Hue, a와 b 축의 각도)을 나타낸다. LCH는 LAB의 지각적 균일성을 유지하면서도, 색상과 채도를 직관적으로 조작할 수 있게 해준다.

그러나 CIE LAB와 LCH에도 한계가 있다. 파란색 영역에서 왜곡되는 현상이 있다.

Oklab 색상 공간

Oklab은 2020년 Björn Ottosson이 개발한 새로운 색상 공간으로, CIE LAB의 한계를 극복하기 위해 설계됐다. Oklab은 LAB와 같은 구조(L, a, b)를 가지고 있지만, 색상 변환 방식이 다르다.

개발자가 말하길 Ok라는 접두어가 붙은 것은 이 색상 모델이 OK 한 작업을 해주기 때문이라고 한다..

OKLCH 란?

OKLCH는 인간의 시각적 인지에 더 가깝게 색을 표현할 수 있도록 설계된 색상 공간이다. Oklab을 극좌표계로 변환한 것으로, Oklab의 모든 장점을 유지하면서 색상(H)과 채도(C)를 직관적으로 조작할 수 있게 해준다. 이는 CIELCh와 Oklab의 장점을 결합한 형태라고 볼 수 있다.

OKLCH의 구성 요소

  1. L (Lightness, 밝기)

    • 색의 밝기를 나타낸다, 0(검정)~1(흰색) 또는 0%~100%
    • 인간의 시각 인지에 맞춰져 있어서, 값의 변화가 실제로 우리 눈에 동일한 수준의 밝기 변화로 느끼게 한다.

  2. C (Chroma, 채도/색의 강도)

    • 색의 선명함 또는 강도를 나타낸다.
    • 0은 완전한 회색(무채색), 값이 커질수록 더 선명한 색이 된다.
    • 디스플레이의 색 영역(sRGB, P3 등)에 따라 최대값이 다르며, 일반적으로 0.37 이하이다.

  3. H (Hue, 색상)

    • 색상의 종류를 나타내며, 0~360도의 각도로 표현된다.
    • 빨강(0/360), 노랑(90), 초록(140), 파랑(220), 보라(320) 등으로 각도로 한 바퀴 돌며 표현된다.

  4. A (Alpha, 투명도)

    • 선택적으로 / 뒤에 0~1 또는 0%~100%로 투명도를 지정할 수 있다.

이러한 구성 요소들은 서로 독립적으로 작동한다. 하나의 값을 변경해도 다른 값에 영향을 미치지 않는다. 이는 RGB나 HSL과 같은 기존 색상 모델의 주요 단점을 해결한 특성 중 하나이다.

CSS에서의 OKLCH 사용법

css
/* 기본 구문 */
color: oklch(L C H);
color: oklch(L C H / A);

/* 밝은 파랑 */
color: oklch(0.7 0.2 240);

/* 투명한 노랑 */
color: oklch(60% 0.25 90 / 80%);

/* 매우 선명한 빨강 (P3 색 영역) */
color: oklch(0.6 0.34 30);

/* 회색 계열 (채도 0) */
color: oklch(0.5 0 0);  /* 중간 회색 */
color: oklch(0.8 0 0);  /* 밝은 회색 */
color: oklch(0.2 0 0);  /* 어두운 회색 */
  • L 값은 소수(0~1) 또는 백분율(0%~100%)로 표현할 수 있다.
  • C 값은 일반적으로 소수로 표현하며, 0.37 이하의 값이 대부분의 디스플레이에서 안전하게 표현된다.
  • H 값은 0~360의 각도로 표현하며, 단위(deg)는 생략 가능하다.

OKLCH의 장점

  1. 지각적 균일성: OKLCH는 값의 변화가 시각적으로도 균일하게 느껴지도록 설계됐다. 예를 들어, 밝기 값을 10% 라고 하면 모든 색상에서 비슷한 수준의 밝기가 느껴진다.

    RGB
    OKLCH

  2. 직관적인 색상 조작: OKLCH에서는 밝기, 채도, 색상을 각각 독립적으로 조절할 수 있다. 이는 색상 팔레트 생성이나 접근성 높은 디자인 작업을 훨씬 쉽고 예측 가능하게 만들어 준다.

    HSL
    0%
    20%
    40%
    60%
    80%
    100%
    OKLCH
    0
    0.05
    0.1
    0.15
    0.2
    0.25

  3. 넓은 색 영역 지원: OKLCH는 sRGB뿐만 아니라 P3와 같은 최신 디스플레이의 넓은 색 영역까지 지원한다. 최신 모바일 기기나 고급 디스플레이에서 그 차이를 확실히 느낄 수 있다.

  4. 일관된 그라디언트: OKLCH를 사용하면 색상 간의 그라디언트가 부드럽고 자연스럽게 표현된다. 기존 RGB나 HSL에서 흔히 발생하는 중간 색상의 탁함이나 색상 밴딩 문제를 크게 줄일 수 있다.

    RGB
    OKLCH

  5. 접근성 향상: 밝기(L) 값을 일정하게 유지하며 색상을 조정할 수 있다, 명도 대비가 중요한 접근성 디자인에 유리하다. 따라서 WCAG 접근성 기준을 충족하는 색상 조합을 더 쉽게 만들 수 있다.

활용 사례

색상 팔레트 생성

OKLCH의 L, C, H 값을 일정 간격으로 조정하여 직관적이고 일관된 색상 팔레트를 자동으로 생성할 수 있다.

css
/* 동일한 밝기와 채도를 유지하면서 색상만 변경 */
--primary: oklch(65% 0.2 240);  /* 파랑 */
--accent1: oklch(65% 0.2 30);   /* 빨강 */
--accent2: oklch(65% 0.2 120);  /* 초록 */

/* 동일한 색상과 채도를 유지하면서 밝기 단계 생성 */
--primary-100: oklch(90% 0.2 240);  /* 매우 밝은 파랑 */
--primary-500: oklch(65% 0.2 240);  /* 중간 파랑 */
--primary-900: oklch(30% 0.2 240);  /* 어두운 파랑 */

Tailwind CSS v4

Tailwind CSS는 v4 버전에서 전체 기본 색상 팔레트를 RGB에서 OKLCH로 업그레이드했다. 특히 P3 색 영역을 지원하는 디스플레이에서 더 생생하고 풍부한 색상을 제공하기 위함이라고 한다.

결론

OKLCH는 인간의 시각에 맞춘 색상 공간으로, 기존 색상 모델의 한계를 극복하고 더 직관적이고 예측 가능한 색상 작업을 가능하게 해준다. 넓은 색 영역 지원, 부드러운 그라디언트, 접근성 향상 등 다양한 장점으로 최신 웹 디자인과 UI/UX 분야라면 도입해야할 새로운 색상 공간이다.

❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0