Конвертер HEX в OKLCH для живого редактирования цвета
Этот конвертер HEX в OKLCH обновляет значение цвета в реальном времени при редактировании любой стороны. Введите цвет HEX или используйте поддерживаемые входы вроде короткого HEX, RGB и именованных цветов. Посмотрите образец цвета, скопируйте готовую строку CSS и проверьте предупреждение о выходе за охват, когда цвет выходит за пределы sRGB.
Конвертер HEX в OKLCH превращает значения цвета в формат, который можно использовать в CSS и другой разработке. Введите цвет HEX, чтобы увидеть его значение OKLCH, или отредактируйте любую сторону и наблюдайте, как другая обновляется в реальном времени. Образец помогает изучить цвет, а инструмент предоставляет готовую строку CSS.
Парсер принимает шестнадцатеричные значения, включая короткие формы вроде #abc, а также ввод RGB вроде rgb(1 2 3 / 50%) и именованные цвета. Конвертер показывает предупреждение, когда цвет выходит за пределы sRGB. Эти поддерживаемые входы делают его полезным, когда значение цвета предоставлено в форме, отличной от нужной вам.
HEX обычно представляет цвет шестнадцатеричными значениями каналов, а OKLCH выражает цвет через светлоту, насыщенность и оттенок. Преобразование между ними помогает, когда проект или workflow требует OKLCH вместо HEX. Двустороннее редактирование в реальном времени также позволяет проверить значение, изменив любой формат и посмотрев обновлённый результат.
Конвертер работает полностью в вашем браузере: ваш ввод обрабатывается на вашем устройстве и не отправляется на сервер. Он бесплатен, не требует регистрации и работает офлайн после загрузки страницы. Разработчики и DevOps-инженеры могут использовать его для проверки, подготовки и копирования значений цвета без отправки их онлайн-сервису.
Шаг 1: Введите цвет HEX, например #abc, или другое поддерживаемое значение цвета вроде RGB или именованного цвета.
Шаг 2: Отредактируйте ввод или значение OKLCH, чтобы увидеть обновление другой стороны в реальном времени.
Шаг 3: Проверьте образец, чтобы изучить цвет визуально, и обратите внимание на предупреждение о выходе за охват.
Шаг 4: Скопируйте готовую строку CSS и используйте её в вашем коде или документации.
Пример использования: Преобразуйте цвет HEX в OKLCH, когда дизайн-система или таблица стилей ожидает значение OKLCH.
Пример использования: Проверьте, соответствует ли значение OKLCH цвету HEX, который вам дали, сравнив живые значения и образец.
Пример использования: Подготовьте фрагменты цвета HEX и OKLCH для документации, тикета или сообщения коммита.
Пример использования: Проверьте преобразование цвета перед добавлением результата в код.
Пример использования: Проверьте, выходит ли цвет за пределы sRGB, по предупреждению конвертера о выходе за охват.
Пример использования: Редактируйте значение цвета в любом формате и смотрите, как соответствующее значение обновляется в реальном времени при работе с CSS.