Elysia Tools

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

Популярные категории

Темы

Язык
ZHESPTRUFRDEEN

Elysia Tools

Навигация

Design

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

· Последнее обновление：2026-06-18

Двустороннее преобразование между 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().

Запуск

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

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

Примеры

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

Связано

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

Подготовлено командой Elysia Tools
Математика502
Цвет214
HTML/CSS86
Hue55
Цветовое пространство53
RGB50
CSS48
HEX40
Lightness34
HSL26
sRGB22
Chroma21

Руководство по использованию инструмента

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

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

Категория
Design
Типы ввода
text, select, number
Тип вывода
html
Покрытие примерами
4
API доступен
Да

Обзор

OKLCH Конвертер цветов — это профессиональный инструмент для двустороннего преобразования цветов между HEX, RGB, HSL, OKLCH и Display-P3 по стандартам CSS Color 4. Он позволяет точно настраивать светлоту, хрому и тон, проверять соответствие цветовым гаммам sRGB и Display-P3, а также автоматически рассчитывать параметры обрезки хромы для цветов, выходящих за пределы стандартного охвата.

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

  • При проектировании современных веб-интерфейсов с поддержкой широкого цветового охвата Display-P3 и CSS Color 4.
  • Для создания перцептуально однородных цветовых палитр и дизайн-систем, где изменение светлоты не должно искажать исходный тон.
  • При необходимости проверить, выходит ли выбранный цвет за рамки стандартного пространства sRGB, и найти ближайший безопасный аналог.

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

  1. 1Введите исходный цвет в любом формате (HEX, RGB, HSL, OKLCH) или задайте параметры L, C, H вручную с помощью числовых полей.
  2. 2Инструмент выполняет математическое преобразование по матрицам CSS Color 4 во все поддерживаемые цветовые пространства.
  3. 3Алгоритм проверяет цвет на вхождение в гаммы sRGB и Display-P3 и, при необходимости, предлагает скорректированные значения с уменьшенной хромой.
  4. 4Скопируйте готовый CSS-код в формате oklch() или color(display-p3 ...) для использования в стилях вашего проекта.

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

  • Адаптация фирменных цветов бренда для современных экранов с поддержкой широкой цветовой гаммы Display-P3.
  • Генерация доступных и контрастных дизайн-систем с предсказуемым изменением светлоты шагов палитры.
  • Быстрая конвертация устаревших HEX/RGB значений в современный CSS-формат oklch() для оптимизации кода.

Примеры

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.

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.

Главная
Инструменты3197
Примеры593
Визуализации461
Средства просмотра файлов103
Темы229
Теги333
Изображения, аудио и видео655

Инструменты для обработки, конвертации и оптимизации изображений, аудио и видео

Математика, даты и финансы644

Калькуляторы, числовые инструменты, логика дат, статистика и финансы

Дизайн и цвет296

Инструменты для цвета, макетов, графики, визуального стиля и дизайна

Текст и письмо209

Инструменты для письма, очистки, форматирования, извлечения и анализа текста

Разработка и Web193

Инструменты разработчика, сетевые утилиты, веб-отладка и автоматизация

Преобразование и кодирование175

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

Структура интерфейса по скриншоту: проверка и передача разработчику
Фортепианный эскиз: создание, проверка MIDI и передача аудиодемо
Проверка ретро-текстур и передача игровых ресурсов
Проверка и передача пошагового руководства со снимками
Визуальная проверка адаптивной страницы после редизайна

© 2026 Elysia Tools. Все права защищены.

ДокументацияТарифыО насУсловия использованияПолитика конфиденциальностиCookieКонтакты
Валидация

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

Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации

Python

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

Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата

Java

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

Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата

Kotlin

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

Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата

Design

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

Конвертирует цвет между HEX, RGB, HSL, CIELAB и Display-P3 с CSS-выводом и проверкой гаммы.

Design

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

Преобразует цвета между HEX, RGB, HSL и CMYK.

Design

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

Загружает изображение, извлекает доминирующие цвета и экспортирует токены для кода с проверкой контраста

Design

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

Создать гармоничный контраст с разделенными дополнительными цветовыми схемами, используя базовый цвет и два соседних цвета к его дополнению

{
  "L": 80,
  "C": 0.3,
  "H": 140,
  "clipMode": "srgb"
}

Результат

Инструмент определил выход за пределы sRGB и рассчитал ближайший цвет с уменьшенной хромой, сохранив исходный тон и светлоту.