Почему стоит использовать OKLCH вместо HSL?

В OKLCH координата светлоты (L) соответствует человеческому восприятию, поэтому изменение насыщенности или яркости не приводит к нежелательному сдвигу цветового тона.

Что происходит, если цвет выходит за пределы гаммы sRGB?

Инструмент предупреждает о выходе за границы sRGB и предлагает ближайший подходящий цвет внутри гаммы за счет точечного уменьшения хромы (C).

Поддерживает ли конвертер формат Display-P3?

Да, он выполняет точное преобразование в пространство Display-P3 и генерирует валидный CSS-код вида color(display-p3 ...).

Можно ли вводить значения L, C, H по отдельности?

Да, вы можете использовать отдельные поля ввода для светлоты (L), хромы (C) и тона (H) для точной калибровки цвета.

Какие стандарты используются для расчетов?

Все преобразования и проверки цветового охвата выполняются строго по спецификации и математическим матрицам CSS Color 4.

Elysia Tools

Навигация

Design

OKLCH Конвертер цветов

Двустороннее преобразование между HEX, RGB, HSL, OKLCH и Display-P3 по CSS Color 4, со значениями светроты/хромы/тона, проверкой гаммы sRGB и Display-P3 и предложением обрезки вне гаммы

Детали

С чем помогает этот инструмент

Вставьте любой цвет (HEX, rgb(), hsl() или oklch()) или задайте OKLCH L/C/H напрямую. Инструмент преобразует между всеми современными цветовыми пространствами по матрицам CSS Color 4 и сообщает:

Значения HEX, sRGB 8-бит, линейный sRGB, HSL, XYZ D65, OKLab и OKLCH
Представление Display-P3
Находится ли цвет внутри sRGB, внутри Display-P3 но вне sRGB, или вне обоих
Предложение по обрезке хромы (ближайший внутри-гаммы OKLCH), когда цвет вне sRGB

Почему OKLCH: его канал L совпадает с воспринимаемой светротой, а C/h — хрома и тон, поэтому изменение светлоты или насыщенности не сдвигает тон (в отличие от HSL). Это делает OKLCH лучшим пространством для построения перцептуально однородных палитр.

Вывод — готовый к копированию CSS, включая color(display-p3 ...) и oklch().

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

1 примеров

Перевести фирменный синий в OKLCH и проверить гамму

Показывает HEX/RGB/HSL/OKLCH/Display-P3 с диагностикой гаммы.

<div>Color converter with OKLCH, P3, and gamut diagnostics.</div>

Ввод

Заполните нужные поля и запустите инструмент.

6 параметров

СодержимоеВставьте или введите основные значения.1

Ввод цветаtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.5

Формат вводаselectНеобязательноСветлота L (%)numberНеобязательноХрома CnumberНеобязательноТон H (°)numberНеобязательноЭталонная гаммаselectНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

OKLCH Конвертер цветов

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Конвертация HEX-кода в OKLCH с проверкой охвата

2. Коррекция ультра-яркого цвета вне гаммы sRGB

FAQ

Примеры цветовых кодов

Примеры Обработки Изображений Web Python

Примеры Обработки Изображений Android Java

Примеры Обработки Изображений Android Kotlin

Конвертер цветовых пространств

Конвертер цвета CMYK

Извлечение палитры из изображения

Инструмент Разделенных Дополнительных Цветов

Инструменты перевода цветовых пространств для веба и печати

Генераторы CSS-эффектов, палитр и дизайн-токенов

Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov

Инструменты цветового дизайна и преобразования цветовых пространств