Как пользоваться: Конвертер HEX в OKLCH
- Вставьте HEX-цвет, например #2563eb.
- При необходимости скорректируйте яркость, насыщенность или тон, чтобы получить вариант цвета.
- Скопируйте значение
oklch()в ваш CSS.
Зачем переводить HEX в OKLCH?
HEX сообщает браузеру, какой цвет показать, но его сложно корректировать вручную. OKLCH разделяет цвет на яркость, насыщенность и тон, поэтому более тёмный оттенок можно получить, изменив одно число. Цвета с одинаковой яркостью также выглядят одинаково светлыми, что помогает создавать согласованные палитры.
Впервые сталкиваетесь с этим форматом? Прочитайте how to use OKLCH in CSS или сравните его в статье OKLCH vs HSL.
Также ищут как: oklch из hex, конвертер цветов oklch, css oklch, oklch онлайн, hex to oklch.
Инструменты, которые хорошо сочетаются с Конвертер HEX в OKLCH
- Конвертер цвета OKLCH — Изучайте перцептивно равномерное цветовое пространство OKLCH с ползунками в реальном времени, проверяйте, входит ли цвет в sRGB, и копируйте соответствующие запасные значения HEX, RGB и HSL.
- Конвертер OKLCH в HEX — Вставьте значение oklch(), и вы получите его HEX-эквивалент, а также RGB и HSL.
- Смеситель цветов — Выберите два цвета и количество шагов, чтобы получить равномерно смешанные промежуточные цвета.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
Часто задаваемые вопросы
Конвертация точная?
Очень близко. Значения округляются для удобочитаемого CSS, поэтому цвет может отличаться на крошечную, незаметную глазу величину.
Поддерживают ли браузеры OKLCH?
Да. Его поддерживают все основные современные браузеры. Очень старым браузерам нужен запасной вариант в виде HEX.
Мои данные загружаются на сервер?
Нет. Всё работает прямо в вашем браузере.
Можно ли установить Конвертер HEX в OKLCH как веб-приложение и пользоваться им офлайн?
Да. Конвертер HEX в OKLCH — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.