Що таке OKLCH і чому варто використовувати його замість HEX або HSL?

OKLCH (Яскравість, Насиченість, Відтінок) — це перцептивно рівномірний кольоровий простір на основі моделі Oklab. На відміну від HEX або HSL, однакові числові зміни в OKLCH дають однакові сприйняті відмінності. Це робить його ідеальним для проектування доступних кольорових палітр, створення рівних градієнтів і генерування послідовних кольорових шкал Tailwind v4.

Як конвертувати HEX у OKLCH?

Вставте ваше HEX-значення (наприклад, #3b82f6) у поле введення HEX, і поле OKLCH миттєво оновиться з еквівалентною нотацією oklch(0.6 0.18 250). Всі інші формати — OKLab, RGB та HSL — також синхронізуються одночасно, надаючи повний і точний результат без додаткових дій з вашого боку.

Що означає 'поза sRGB-гамутом' і що відбувається з кольором?

Деякі OKLCH-кольори — зокрема значення з високою насиченістю — виходять за межі кольорового простору sRGB, який використовує більшість дисплеїв. Коли це відбувається, інструмент застосовує алгоритм toGamut з CSS Color 4, щоб знайти найближчий відображуваний sRGB-колір. З'являється бурштинове попереджувальне повідомлення з оригінальним значенням поза гамутом та маппованим результатом, щоб ви точно знали, що відбувається з вашим кольором.

Як працює генератор палітри Tailwind v4 OKLCH?

Генератор використовує офіційний розклад яскравості Tailwind v4 (50=0.971, 100=0.945, до 950=0.238), застосований до вашого поточного відтінку та насиченості. Він виробляє 11 кольорових кроків від світлого до темного і експортує їх як блок коду @theme { --color-brand-50: oklch(...); }, готовий до вставки у ваш CSS.

Чому інтерполяція OKLCH виглядає краще, ніж HSL для градієнтів?

HSL інтерполює через циліндричну систему координат, яка не відповідає людському сприйняттю, що часто призводить до сірих провалів або несподіваних змін відтінку посередині градієнта. OKLCH інтерполює в перцептивно рівномірному просторі Oklab, тому яскравість і насиченість переходять плавно без несподіваних кольорових відхилень у середній частині градієнта.

Чи є цей конвертер OKLCH безкоштовним і приватним?

Так. Інструмент повністю безкоштовний і працює виключно у вашому браузері за допомогою бібліотеки culori. Жодні значення кольорів не завантажуються на сервер, а вся обробка відбувається локально на вашому пристрої для повної конфіденційності даних.

Чи підтримується CSS Color 4 OKLCH у всіх браузерах?

Синтаксис кольору OKLCH (oklch()) підтримується у всіх сучасних браузерах починаючи з 2023 року, включаючи Chrome 111+, Firefox 113+, Safari 15.4+ та Edge 111+. Для старих браузерів використовуйте резервні значення HEX або RGB, які надає цей конвертер для повної зворотної сумісності.

Кольорові інструменти

Конвертер кольорів OKLCH – CSS Color 4, генератор палітри Tailwind v4

Безкоштовний конвертер кольорів OKLCH із синхронізацією між OKLCH, OKLab, RGB, HSL та HEX. Включає повзунки L/C/H/альфа, гамут-маппінг CSS Color 4 та експорт палітри Tailwind v4.

OKLCH (Яскравість, Насиченість, Відтінок) — це перцептивно рівномірний кольоровий простір, побудований на моделі Oklab і офіційно прийнятий у CSS Color Level 4. На відміну від RGB або HSL, OKLCH зберігає сприйняту яскравість незмінною між відтінками, що робить його ідеальним для доступних кольорових систем, палітр Tailwind v4 і рівних градієнтів.

Як використовувати конвертер кольорів OKLCH

1
Введіть значення кольору
Введіть або вставте значення в будь-якому підтримуваному форматі: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) або oklab(0.6 -0.056 -0.169). Інструмент миттєво синхронізує всі інші формати.
2
Точне налаштування за допомогою повзунків L/C/H/Альфа
Перетягуйте повзунки Яскравості (L), Насиченості (C), Відтінку (H) або Альфа. Повзунок насиченості показує маркер межі sRGB-гамуту, щоб ви завжди знали, коли колір перевищує стандартний діапазон відображення.
3
Перевірте попередження гамуту, якщо воно з'явилося
Якщо ваш OKLCH-колір виходить за межі sRGB-гамуту, з'являється бурштинове попереджувальне повідомлення з оригінальним значенням і результатом, маппованим за допомогою toGamut з CSS Color 4, який використовується для відображення.
4
Згенеруйте палітру Tailwind v4
Розділ OKLCH-палітри Tailwind v4 автоматично генерує 50–950 кольорових кроків для вашого поточного відтінку відповідно до офіційного розкладу яскравості Tailwind. Натисніть Копіювати, щоб вставити блок @theme безпосередньо у ваш CSS.

Джерела

W3C CSS Color Level 4 – oklch()
Специфікація W3C, що визначає нотацію кольору OKLCH та алгоритми гамут-маппінгу.
Culori – JavaScript-бібліотека кольорів
Бібліотека з відкритим кодом, що забезпечує конвертацію OKLCH, маппінг toGamut та перцептивну інтерполяцію в цьому інструменті.
Evil Martians – OKLCH у CSS: чому варто відмовитися від RGB та HSL?
Вичерпний посібник, що пояснює переваги OKLCH над RGB та HSL для сучасної роботи з кольором.
Tailwind CSS v4 – Стандартна палітра
Офіційна документація кольорової палітри Tailwind, включаючи значення яскравості OKLCH, що використовуються в цьому генераторі палітри.

Пов'язані інструменти

Конвертер кольорів

Конвертуйте між RGB, RGBA, HEX, HSL, HSV та CMYK з двонаправленою синхронізацією в реальному часі.

Мінімізатор CSS

Мінімізуйте CSS, що використовує значення кольорів OKLCH.

Переглядач SVG

Попередньо переглядайте та перевіряйте SVG-графіку, що використовує значення заливки та обводки OKLCH.

Часті запитання

Що таке OKLCH і чому варто використовувати його замість HEX або HSL?: OKLCH (Яскравість, Насиченість, Відтінок) — це перцептивно рівномірний кольоровий простір на основі моделі Oklab. На відміну від HEX або HSL, однакові числові зміни в OKLCH дають однакові сприйняті відмінності. Це робить його ідеальним для проектування доступних кольорових палітр, створення рівних градієнтів і генерування послідовних кольорових шкал Tailwind v4.
Як конвертувати HEX у OKLCH?: Вставте ваше HEX-значення (наприклад, #3b82f6) у поле введення HEX, і поле OKLCH миттєво оновиться з еквівалентною нотацією oklch(0.6 0.18 250). Всі інші формати — OKLab, RGB та HSL — також синхронізуються одночасно, надаючи повний і точний результат без додаткових дій з вашого боку.
Що означає 'поза sRGB-гамутом' і що відбувається з кольором?: Деякі OKLCH-кольори — зокрема значення з високою насиченістю — виходять за межі кольорового простору sRGB, який використовує більшість дисплеїв. Коли це відбувається, інструмент застосовує алгоритм toGamut з CSS Color 4, щоб знайти найближчий відображуваний sRGB-колір. З'являється бурштинове попереджувальне повідомлення з оригінальним значенням поза гамутом та маппованим результатом, щоб ви точно знали, що відбувається з вашим кольором.
Як працює генератор палітри Tailwind v4 OKLCH?: Генератор використовує офіційний розклад яскравості Tailwind v4 (50=0.971, 100=0.945, до 950=0.238), застосований до вашого поточного відтінку та насиченості. Він виробляє 11 кольорових кроків від світлого до темного і експортує їх як блок коду @theme { --color-brand-50: oklch(...); }, готовий до вставки у ваш CSS.
Чому інтерполяція OKLCH виглядає краще, ніж HSL для градієнтів?: HSL інтерполює через циліндричну систему координат, яка не відповідає людському сприйняттю, що часто призводить до сірих провалів або несподіваних змін відтінку посередині градієнта. OKLCH інтерполює в перцептивно рівномірному просторі Oklab, тому яскравість і насиченість переходять плавно без несподіваних кольорових відхилень у середній частині градієнта.
Чи є цей конвертер OKLCH безкоштовним і приватним?: Так. Інструмент повністю безкоштовний і працює виключно у вашому браузері за допомогою бібліотеки culori. Жодні значення кольорів не завантажуються на сервер, а вся обробка відбувається локально на вашому пристрої для повної конфіденційності даних.
Чи підтримується CSS Color 4 OKLCH у всіх браузерах?: Синтаксис кольору OKLCH (oklch()) підтримується у всіх сучасних браузерах починаючи з 2023 року, включаючи Chrome 111+, Firefox 113+, Safari 15.4+ та Edge 111+. Для старих браузерів використовуйте резервні значення HEX або RGB, які надає цей конвертер для повної зворотної сумісності.