Конвертер кольорів OKLCH і перевірка колірного охоплення
Перетворюйте між OKLCH, hex, RGB і HSL і створюйте рампи, які залишаються сприйнятливими навіть завдяки тому, що легкість і кольоровість зберігаються під час зміни відтінку. Кольори за межами sRGB відображаються шляхом зменшення кольоровості, а не шляхом відсікання — різниця в тому, чи ваш фіолетовий колір залишається фіолетовим.
Чому легкість у OKLCH має значення
У HSL зміна відтінку при фіксованій освітленості змінює яскравість кольору: жовтий при 50% читається набагато яскравіше, ніж синій при 50%, тому рамки HSL виглядають нерівномірно, незалежно від того, наскільки ретельно ви їх розподіляєте. OKLab було адаптовано до перцептивних даних, тому його вісь світла відстежує те, що повідомляє око. Утримуйте L і C і обертайте H, і кожен зразок матиме однакову візуальну вагу — це вся причина для створення палітр тут, а не в HSL.
Відображення гами – це частина, яка має значення
Багато значень OKLCH не мають еквівалента sRGB, і наївним виправленням є обмеження діапазону для кожного каналу. Це помітно змінює відтінок: яскраво-фіолетовий обрізаний канал за каналом переходить у бік синього. Зменшення насиченості, зберігаючи яскравість і відтінок, зберігає сам колір розпізнаваним і лише забирає насиченість, яку екран не міг показати. Ця сторінка використовує алгоритм із CSS Колір 4 — ділить кольоровість навпіл і приймає обрізаний результат, коли він знаходиться в межах лише помітної різниці від зменшеного.
Перевірено за посиланням
Перетворення порівнювалися з незалежною реалізацією в сітці з чотирьох тисяч кольорів: яскравість і кольоровість узгоджуються з точністю до мільйонної частки, відтінок – до десятитисячної градуса, і кожне шістнадцяткове значення точно повторюється. Відображення гами було перевірено таким же чином проти чотирьохсот вісімдесяти кольорів, що виходять за межі гамми, і вибрано в межах однієї частини з 255 на найгіршому з них. Аудиторія, яка читає OKLCH, помічає неправильну матрицю, тому здавалося, що варто сказати, як це було перевірено.
Використання виводу
Спеціальні властивості записані в OKLCH з шістнадцятковим поряд із ними в коментарі, тому що це пара, яку ви хочете переглянути: значення, яке надсилає ваша збірка, і значення, яке ви можете вставити в будь-що інше. Кожен браузер, який зараз використовується, розуміє синтаксис OKLCH; якщо ви все ще підтримуєте той, який не підтримує, коментар є вашим запасним варіантом.
Поширені запитання
Чому колірність обмежена 0,4?
Тому що ніщо в sRGB не наближається до нього. Найбільш насиченим кольором sRGB є синій із значенням приблизно 0,313, і повзунок проходить далі, щоб ви могли бачити, що падає назовні та як це відображається.
Яка тут лише помітна різниця?
Дельта E 0,02 у OKLab, що є порогом, який використовує CSS Color 4. Під ним відсікання та зменшення кольоровості нерозрізнені, тому алгоритм бере відрізаний колір і зберігає додаткову кольоровість.
Чи підтримує він P3 або Rec2020?
Ще ні. Усе тут націлено на sRGB, що й означають попередження про гамму. Для ширших діапазонів потрібні власні праймеріз і другий набір матриць.
Щось із цього кудись надсилається?
Ні. Перетворення виконуються на цій сторінці.
Створено командою GO AI. CSS калькулятор clamp() · WCAG перевірка контрасту · Усі безкоштовні інструменти