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

• Мгновенное преобразование OKLCH: конвертер OKLCH обновляет все выходные форматы при каждом движении ползунка — не нужно нажимать кнопку. Настройте яркость, цветность и оттенок и мгновенно получите значения HEX, RGB, HSL и OKLab. Образец цвета в реальном времени показывает, как именно цвет OKLCH будет выглядеть на экране.
• Перцептивно однородное цветовое пространство: OKLCH — это перцептивно однородное цветовое пространство: равные числовые шаги соответствуют одинаковым воспринимаемым цветовым различиям, в отличие от HSL или RGB. Конвертер OKLCH упрощает работу с этим современным форматом CSS Color Level 4 для улучшения градиентов, цветовых шкал и доступных вариантов цвета.
• 100% конфиденциальность — без загрузки: все преобразования происходят локально в вашем браузере с использованием чистого JavaScript. Ваши значения цвета никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это безопасно для клиентских проектов и собственных систем проектирования.
• Бесплатно и без ограничений: конвертируйте неограниченное количество цветов OKLCH без регистрации, подписки и ограничений на использование. Конвертер OKLCH полностью бесплатен навсегда, и никакая реклама не блокирует интерфейс. Включает обнаружение гаммы и ближайшие предложения внутри гаммы.

• Разработка современных CSS. Разработчики внешнего интерфейса используют конвертер OKLCH для создания и проверки цветов в современном CSS. Благодаря поддержке oklch() во всех основных браузерах преобразователь OKLCH помогает писать более чистый и удобный в обслуживании цветовой код, используя единообразное по восприятию цветовое пространство.
• Плавное создание градиентов: OKLCH создает значительно более плавные и визуально точные градиенты, чем sRGB или HSL. Используйте конвертер OKLCH, чтобы найти правильные значения яркости, цветности и оттенка для остановок градиента, которые обеспечивают естественный переход без мутных средних точек.
• Доступные цветовые шкалы. Специалисты по специальным возможностям используют конвертер OKLCH, поскольку его единообразие восприятия делает его идеальным для создания доступных цветовых шкал. Равные шаги яркости OKLCH соответствуют равным шагам воспринимаемого контраста, что значительно упрощает создание цветовых шкал, соответствующих WCAG.
• Цветовые токены системы проектирования. Инженеры системы проектирования используют преобразователь OKLCH для определения цветовых жетонов понятным для восприятия способом. Цветовое пространство OKLCH позволяет легко создавать систематические цветовые шкалы, в которых каждый шаг имеет одинаковый визуальный вес для всех оттенков.
• Цветоведение и исследования: Исследователи и специалисты по цвету используют конвертер OKLCH для изучения цветового пространства OKLab/OKLCH. Инструмент предоставляет необработанные значения OKLab наряду со стандартными форматами вывода, что делает его полезным для понимания математики цветового пространства и моделей восприятия.
• Миграция устаревшего CSS в современный. При переносе устаревших цветовых систем hex или rgb() в современные oklch() используйте конвертер OKLCH, чтобы понять, каковы эквивалентные значения OKLCH. Это поможет вам лучше понять новое цветовое пространство, постепенно внедряя синтаксис CSS Color Level 4.

OKLCH (Lightness-Chroma-Hue) — это современное цветовое пространство, представленное Бьёрном Оттоссоном в 2020 году. Оно является частью CSS Color Level 4 и разработано так, чтобы быть единообразным для восприятия — это означает, что равные числовые изменения значений OKLCH производят равные воспринимаемые цветовые различия. Это значительное улучшение по сравнению со старыми цветовыми пространствами, такими как HSL и sRGB, которые не являются единообразными по восприятию и могут давать противоречивые визуальные результаты при интерполяции цветов.

Конвертер OKLCH поддерживает полный конвейер OKLCH: он преобразует форматы OKLCH, OKLab (базовое прямоугольное координатное пространство), линейный sRGB и стандартные форматы sRGB, включая HEX, RGB и HSL. Во всех преобразованиях используется точная матричная математика Оттоссона без каких-либо приближений.

1. Отрегулируйте ползунки OKLCH: установите яркость (L: 0–1), цветность (C: 0–0,4+) и оттенок (H: 0–360°), используя интерактивные ползунки или числовые значения. Вы также можете щелкнуть любой образец цветового чипа, чтобы мгновенно загрузить предустановленное значение OKLCH. Альфа-прозрачность поддерживается для полупрозрачных цветов.
2. Преобразование происходит в реальном времени: при настройке любого ползунка значение OKLCH преобразуется через OKLab в линейный sRGB, а затем в форматы HEX, RGB и HSL. Все значения обновляются мгновенно, без нажатия кнопки. Образец цвета показывает визуальный предварительный просмотр преобразованного цвета.
3. Проверка гаммы выполняется автоматически: преобразователь OKLCH автоматически определяет, выходит ли цвет за пределы гаммы sRGB. Если это так, отображается предупреждение вместе с ближайшим к гамме цветом, достигнутым за счет уменьшения цветности при сохранении постоянной яркости и оттенка.
4. Копирование любого значения. Нажмите кнопку «Копировать» рядом с любой выходной строкой или карточкой формата, чтобы скопировать это конкретное значение, или используйте «Копировать все значения», чтобы скопировать полные данные цвета, включая необработанные компоненты OKLab.

• Яркость (L): варьируется от 0 (черный) до 1 (белый). В отличие от легкости HSL, легкость OKLCH максимально соответствует человеческому восприятию. Яркость 0,5 визуально выглядит на полпути между черным и белым, независимо от оттенка или цветности.
• Цветность (C): управляет интенсивностью или насыщенностью цвета. Большинство цветов sRGB имеют значения цветности от 0 до 0,25, хотя некоторые глубокие пурпурные и голубые цвета могут достигать 0,3. Значения выше 0,3 с большей вероятностью выходят за пределы гаммы sRGB. Теоретический максимум цветности OKLCH не ограничен.
• Оттенок (H): угол цвета от 0 до 360 градусов, соответствующий тем же углам оттенка, что и в OKLab. 0° = красный/розовый, 90° = желтый, 180° = зеленый, 270° = синий. Цвета OKLCH воспринимаются однородными: равные угловые шаги создают одинаковые воспринимаемые различия в оттенках.
• Альфа (A): управляет прозрачностью от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Значение альфа передается через конвейер преобразования во все выходные форматы, поэтому вы можете использовать полученный цвет в любом контексте CSS, требующем прозрачности.

OKLCH против HSL: HSL не является однородным по восприятию — два цвета с одинаковой яркостью HSL могут сильно различаться по яркости (например, желтый при L=50% выглядит намного ярче, чем синий при L=50%). OKLCH решает эту фундаментальную проблему. HSL также создает нечеткие средние точки при интерполяции между двумя цветами, в то время как градиенты OKLCH сохраняют постоянную насыщенность и качество изображения.

OKLCH против LCH: LCH (на основе CIE L*a*b*) доступен в CSS дольше, но имеет существенный недостаток — он может выдавать неверные цвета при измерении линейности оттенка. OKLCH был специально разработан, чтобы быть более надежным и лучше отражать то, как зрительная система человека воспринимает цвет. Оба поддерживаются в современном CSS, но OKLCH рекомендуется использовать для новых проектов.

OKLCH против sRGB: sRGB — это стандартное цветовое пространство для веб-контента, но оно зависит от устройства и не является единообразным для восприятия. OKLCH — это аппаратно-независимое цветовое пространство, которое может представлять цвета за пределами гаммы sRGB (дисплеи с широкой гаммой). Конвертер OKLCH поможет вам понять, когда ваши цвета превышают sRGB, и покажет ближайшую альтернативу в цветовой гамме.