У чому прикол OKLCH порівняно з HEX — пояснюю людською мовою

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Хочу поговорити з вами в чому різниця між OKLCH і в чому його прикол порівняно зі звичайним HEX.

Так, це база, але давайте проговоримо нормально, бо вдруг хтось знайде це корисним для себе.

Чому HEX та RGB — це біль для розробки? Поглянь на колір #3553ff. А тепер скажи, яким стане це число, якщо зробити колір «трохи світлішим»? Отож. Ніхто не скаже. Ти просто лізеш у піпетку у Фігмі, сподіваючись вгадати потрібний відтінок.

RGB так само: три абстрактні числа (скільки там червоного, зеленого і синього), які комп’ютер розуміє, а от людське око — взагалі ні.

HSL ніби рятує, але насправді бреше. Комп’ютерний алгоритм тут сліпий до людського сприйняття. Побудуєш на HSL автоматичну палітру і весь контраст попливе.

Що таке OKLCH людською мовою?

Цей простір побудований на тому, як колір сприймає саме людське око (perceptually uniform). Тут усього три зрозумілі значення:

💡 L (Lightness) — чесна світлота від 0 до 1. Вона працює так, як бачать очі.
💡 C (Chroma) — насиченість (від 0 і вище).
💡 H (Hue) — відтінок (від 0 до 360 градусів по колу).

Наприклад синій виглядає так: oklch (0.58 0.2 260)

Хочу світліший? Я просто піднімаю L, тримаючи інші цифри: oklch (0.97 0.02 260).

Хочу темніший? Опускаю L: oklch (0.2 0.1 260).

Я не вгадую код навмання, я просто міняю яскравість, і колір поводиться абсолютно передбачувано.

Чому це маст-хев для дизайн-інженерів?

Шкала відтінків (50–950) будується сама — фіксуєш відтінок (H) і просто гойдаєш світлоту (L). Дарк-мод за секунду — дзеркально перевертаєш значення L для інтерфейсу, і все готово.

Ідеальні ховери та стейти — зсуваєш L на фіксований крок, і кнопка підсвічується однаково рівно і з правильним контрастом по всій палітрі.

Також доступ до супер-соковитих кольорів на сучасних Mac та iPhone, які звичайний HEX фізично не здатний закодувати (він їх просто зрізає)

Tailwind v4 вже повністю перейшов на oklch, вся їхня дефолтна палітра тепер написана в ньому. Тобі все одно доведеться з цим працювати.

Де підводні камені?

Старі браузери: Зовсім древні мамонти потребують фолбеку, але Tailwind 4.1+ підкладає його автоматично під капотом.

Figma: Вона досі напряму не вміє працювати з oklch. На етапі передачі макету розробнику може бути невеликий розрив, тримай це в голові.

Якщо накрутити забагато насиченості ©, колір може вийти за межі можливостей монітора і браузер його трохи підріже. Це ок, не лякайся.

Як це налаштувати в коді?

Тримай кольори як глобальні CSS-змінні (дизайн-токени) у :root:

CSS
:root {
—brand-500: oklch(0.58 0.2 260);
—brand-50: oklch(0.97 0.02 260);
—brand-900: oklch(0.2 0.1 260);
}

Корисні інструменти

Конвертер oklch.com — закидаєш туди свій HEX з Фігми і забираєш готовий oklch-код.

От і вся база. Сподіваюсь я все правильно написала — поправте якщо що 🐸

Більше про продуктову розробку, системний дизайн та те, як оптимізувати свою роботу (зокрема за допомогою AI), я регулярно пишу у своєму Telegram-каналі @dontprompt. Залітайте, там багато корисного!