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

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

> Каноническая страница: https://elysiatools.com/ru/tools/oklch-color-converter

- **Категория:** Design

- **Ключевые слова:** oklch, цветовое пространство, 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()`.

## Входные данные

- **Ввод цвета** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256)
- **Формат ввода** (select)
- **Светлота L (%)** (number): 0–100 (OKLCH 0–1)
- **Хрома C** (number): e.g. 0.19 (typically 0–0.4)
- **Тон H (°)** (number): 0–360
- **Эталонная гамма** (select)

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

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

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

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

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

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

## Частые вопросы

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

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [Конвертер цветовых пространств](https://elysiatools.com/ru/tools/color-space-converter): Конвертирует цвет между HEX, RGB, HSL, CIELAB и Display-P3 с CSS-выводом и проверкой гаммы.
- [Конвертер цвета CMYK](https://elysiatools.com/ru/tools/cmyk-converter): Преобразует цвета между HEX, RGB, HSL и CMYK.
- [Извлечение палитры из изображения](https://elysiatools.com/ru/tools/image-color-palette-extractor): Загружает изображение, извлекает доминирующие цвета и экспортирует токены для кода с проверкой контраста
- [Инструмент Разделенных Дополнительных Цветов](https://elysiatools.com/ru/tools/color-split-complement): Создать гармоничный контраст с разделенными дополнительными цветовыми схемами, используя базовый цвет и два соседних цвета к его дополнению
- [Определитель имён цветов CSS](https://elysiatools.com/ru/tools/css-color-name-resolver): Находит ближайший именованный цвет CSS для любого hex-значения по метрике CIEDE2000 и показывает всё семейство цвета.
- [Визуализатор CSS easing и анимации](https://elysiatools.com/ru/tools/css-easing-visualizer): Визуализирует CSS-кривую cubic-bezier, показывает предпросмотр на позиции/прозрачности/масштабе, выбор пресетов и экспорт CSS
- [Синхронизатор палитры Tailwind](https://elysiatools.com/ru/tools/tailwind-color-palette-sync): Введите HEX, выберите схему именования (шкала 50–950 / одно имя / вложенность) — генерирует фрагмент theme.extend.colors для tailwind.config.ts с уровнями WCAG AA/AAA. Тёмная тема опциональна.
- [Конвертер поглощения и пропускания (A = −log₁₀T)](https://elysiatools.com/ru/tools/absorbance-transmittance-converter): Двусторонний пересчёт между поглощением и пропусканием: A = −log₁₀(T), T = 10⁻ᴬ, %T = 100·T, A = 2 − log₁₀(%T). Принимает поглощение A, процентное пропускание %T или долю пропускания T и сразу выдаёт все три представления. Ориентиры: A=0 → %T=100; A=1 → %T=10; A=0,301 → %T=50. Отрицательное поглощение означало бы %T > 100 %, что невозможно в стандартной спектрофотометрии, и отклоняется.

## Примеры

- [Примеры цветовых кодов](https://elysiatools.com/ru/samples/color-code): Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации
- [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
- [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата
- [Примеры Обработки Изображений Android Kotlin](https://elysiatools.com/ru/samples/android-image-processing-kotlin): Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата