Выбор и конвертер цвета

• Мгновенная конвертация в реальном времени: каждый формат обновляется в момент изменения любого значения — выберите цвет на полотне, перетащите ползунок оттенка или введите прямо в любое поле HEX, RGB, HSL, HSV, CMYK, HWB или LAB. Никаких кнопок.
• Семь цветовых форматов, включая CIE LAB: конвертер поддерживает HEX, RGB, HSL, HSV, CMYK, HWB и CIE LAB — перцептивно равномерное пространство, используемое в печати, фотографии и цветовой науке. Все форматы редактируемы и копируемы.
• Визуальный выбор + проверка контраста WCAG: полотно насыщенности-яркости и ползунок оттенка дают точный визуальный контроль. Встроенная проверка контраста WCAG показывает статус прохождения AA и AAA вашего цвета на белом и чёрном фонах.
• 100 % конфиденциально — без загрузок: все конвертации выполняются локально в браузере. Цветовые данные никогда не отправляются на сервер, не сохраняются и не регистрируются. Конвертер полностью работает офлайн после загрузки страницы.

• Веб- и UI-разработка: конвертируйте токены дизайна между HEX и HSL для CSS custom properties или получайте точные значения RGB для работы с canvas и WebGL. Конвертер даёт все форматы, нужные веб-разработчику, в одном месте.
• Дизайн-системы и фирменные цвета: проверяйте согласованность фирменных цветов в представлениях HEX (веб), CMYK (печать) и LAB (перцептивное). Используйте конвертер для сохранения точности цвета на всех носителях.
• Дизайн для печати и допечатной подготовки: конвертируйте экранные цвета в CMYK для полиграфии или используйте значения CIE LAB для независимой от устройства спецификации цвета. Конвертер точно выполняет преобразования sRGB в CMYK и sRGB в LAB.
• Доступность и соответствие WCAG: мгновенно проверяйте коэффициент контраста цвета переднего плана на белом и чёрном фонах. Встроенная проверка WCAG показывает статус AA и AAA, чтобы выбирать доступные цвета, не покидая инструмент.
• Фотография и цветокоррекция: используйте значения HSV для согласования оттенка, насыщенности и яркости цветов в рабочих процессах редактирования фотографий. Вывод LAB конвертера полезен для перцептивного согласования цвета при разном освещении.
• Цифровое искусство и иллюстрация: выбирайте цвета на визуальном полотне и получайте их точные значения во всех форматах для использования в Figma, Sketch, Procreate или любом другом инструменте дизайна. Готовые образцы дают быстрый доступ к распространённым дизайнерским цветам.

Выбор и конвертер цвета позволяет выбирать любой цвет визуально и сразу видеть его эквивалентные значения во всех основных форматах цвета. Разные инструменты и рабочие процессы используют разные представления цвета — веб-разработчики используют HEX и RGB , дизайнеры — HSL и HSV , специалисты по печати — CMYK , а цветоведы — CIE LAB . Этот конвертер обрабатывает все семь форматов с точной двунаправленной конвертацией — измените любое значение, и все остальные обновятся мгновенно.

Конвертация происходит в три этапа, полностью в браузере:

1. Выберите или введите цвет: используйте полотно насыщенности-яркости и ползунок оттенка для визуального выбора, нажмите встроенный выбор цвета браузера, введите HEX-код или введите значения прямо в любое поле формата (RGB, HSL, HSV, CMYK, HWB или LAB).
2. Мгновенная конвертация в браузере: все значения преобразуются через общее промежуточное RGB-представление с точной цветовой математикой (sRGB в XYZ в LAB для перцептивных форматов). Ваши цветовые данные никогда не покидают браузер.
3. Копируйте любой формат: нажмите значок копирования рядом с любой строкой формата, чтобы скопировать значение, или нажмите «Копировать всё», чтобы скопировать все форматы сразу. Вывод CSS-переменной готов к вставке прямо в таблицу стилей.

• HEX: шестизначная шестнадцатеричная нотация (#RRGGBB) — стандарт для HTML, CSS и большинства инструментов дизайна.
• RGB: каналы красного, зелёного, синего (0-255) — используется в CSS, canvas, WebGL и обработке изображений.
• HSL: оттенок, насыщенность, яркость — интуитивнее для дизайнеров; нативная функция цвета CSS с CSS Color Level 4.
• HSV: оттенок, насыщенность, значение — используется в Photoshop, Figma и большинстве профессиональных выборов цвета.
• CMYK: голубой, пурпурный, жёлтый, key (чёрный) — стандарт для полиграфии и допечатных процессов.
• HWB: оттенок, белизна, чернота — более новая функция цвета CSS (CSS Color Level 4), более интуитивная, чем HSL, для смешивания с белым/чёрным.
• CIE LAB: перцептивно равномерное цветовое пространство (L* = яркость, a* = ось зелёный-красный, b* = ось синий-жёлтый) — используется в цветовой науке, профилях ICC и независимом от устройства согласовании цвета.

Проверка контраста WCAG вычисляет относительную яркость вашего цвета и его коэффициент контраста на чистом белом (#FFFFFF) и чистом чёрном (#000000). Коэффициент 4,5:1 соответствует WCAG 2.1 AA для обычного текста, 3:1 — AA для крупного текста и компонентов интерфейса, а 7:1 — AAA для обычного текста. Используйте её, чтобы убедиться, что цвета текста доступны для слабовидящих пользователей.