Ключевые факты
- Категория
- Дизайн и цвет
- Типы входных данных
- text, select, number
- Тип результата
- html
- Покрытие примерами
- 1
- API доступен
- Yes
Обзор
OKLCH Конвертер цветов — это профессиональный инструмент для двустороннего преобразования цветов между HEX, RGB, HSL, OKLCH и Display-P3 по стандартам CSS Color 4. Он позволяет точно настраивать светлоту, хрому и тон, проверять соответствие цветовым гаммам sRGB и Display-P3, а также автоматически рассчитывать параметры обрезки хромы для цветов, выходящих за пределы стандартного охвата.
Когда использовать
- •При проектировании современных веб-интерфейсов с поддержкой широкого цветового охвата Display-P3 и CSS Color 4.
- •Для создания перцептуально однородных цветовых палитр и дизайн-систем, где изменение светлоты не должно искажать исходный тон.
- •При необходимости проверить, выходит ли выбранный цвет за рамки стандартного пространства sRGB, и найти ближайший безопасный аналог.
Как это работает
- •Введите исходный цвет в любом формате (HEX, RGB, HSL, OKLCH) или задайте параметры L, C, H вручную с помощью числовых полей.
- •Инструмент выполняет математическое преобразование по матрицам CSS Color 4 во все поддерживаемые цветовые пространства.
- •Алгоритм проверяет цвет на вхождение в гаммы sRGB и Display-P3 и, при необходимости, предлагает скорректированные значения с уменьшенной хромой.
- •Скопируйте готовый CSS-код в формате oklch() или color(display-p3 ...) для использования в стилях вашего проекта.
Сценарии использования
Примеры
1. Конвертация HEX-кода в OKLCH с проверкой охвата
Веб-дизайнер- Контекст
- Дизайнер хочет перевести основной синий цвет интерфейса в современный формат OKLCH для создания дизайн-системы.
- Проблема
- Необходимость получить точные координаты LCH и убедиться, что цвет корректно отображается в стандартном sRGB.
- Как использовать
- Введите #3b82f6 в поле ввода цвета и выберите автоопределение формата.
- Пример конфигурации
-
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" } - Результат
- Получены точные значения OKLCH, подтверждено нахождение цвета внутри sRGB и сгенерирован готовый CSS-код.
2. Коррекция ультра-яркого цвета вне гаммы sRGB
Фронтенд-разработчик- Контекст
- Разработчик использует яркий зеленый цвет в формате OKLCH, который некорректно отображается на старых мониторах.
- Проблема
- Цвет выходит за пределы sRGB, требуется найти ближайшую безопасную альтернативу без изменения тона.
- Как использовать
- Задайте параметры L=80, C=0.3, H=140 напрямую и установите режим обрезки гаммы на sRGB.
- Пример конфигурации
-
{ "L": 80, "C": 0.3, "H": 140, "clipMode": "srgb" } - Результат
- Инструмент определил выход за пределы sRGB и рассчитал ближайший цвет с уменьшенной хромой, сохранив исходный тон и светлоту.
Проверить на примерах
designСвязанные хабы
FAQ
Почему стоит использовать OKLCH вместо HSL?
В OKLCH координата светлоты (L) соответствует человеческому восприятию, поэтому изменение насыщенности или яркости не приводит к нежелательному сдвигу цветового тона.
Что происходит, если цвет выходит за пределы гаммы sRGB?
Инструмент предупреждает о выходе за границы sRGB и предлагает ближайший подходящий цвет внутри гаммы за счет точечного уменьшения хромы (C).
Поддерживает ли конвертер формат Display-P3?
Да, он выполняет точное преобразование в пространство Display-P3 и генерирует валидный CSS-код вида color(display-p3 ...).
Можно ли вводить значения L, C, H по отдельности?
Да, вы можете использовать отдельные поля ввода для светлоты (L), хромы (C) и тона (H) для точной калибровки цвета.
Какие стандарты используются для расчетов?
Все преобразования и проверки цветового охвата выполняются строго по спецификации и математическим матрицам CSS Color 4.