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

Конвертируйте между HEX, RGB, HSL, HSV и CMYK. Живой предпросмотр. Проверщик контраста WCAG для доступности. Ничего не покидает ваш браузер.

Как работает Конвертер цветов

Конвертер цветов мгновенно переводит любой цвет между форматами HEX, RGB, HSL, HSV и CMYK по мере ввода. Также выполняет проверку контраста WCAG между любыми двумя выбранными цветами, показывая коэффициент контраста и результат прохождения или провала AA/AAA для обычного текста, крупного текста и элементов интерфейса. Все вычисления происходят в браузере без отправки данных; ничто из введённого не покидает устройство.

Понимание того, как один и тот же цвет выглядит в разных цветовых моделях, полезно при передаче дизайнов. Дизайнер может указать фирменный цвет как HEX #1A4F8C; CSS-разработчику нужен эквивалент HSL для оформления тем; команде печати нужна разбивка CMYK. Этот инструмент выполняет преобразование во всех направлениях одновременно, избавляя от необходимости использовать несколько конвертеров.

Автор: Bastien Sulyan

Конвертер цветов: пошаговая инструкция

Введите значение HEX, нажмите на цветовую плитку или введите значения RGB, HSL, HSV или CMYK в соответствующие поля.
Все другие представления форматов немедленно обновятся для отображения эквивалентного цвета.
Для проверки контраста выберите цвет переднего плана и цвет фона с помощью двух цветовых пикеров.
Прочтите коэффициент контраста WCAG и значки прохождения/провала для уровней соответствия AA и AAA.
Скопируйте любое значение цвета с помощью значка копирования рядом с каждым полем.

Частые сценарии использования

UI-дизайнер преобразует фирменный HEX-код в HSL для написания пользовательского CSS-свойства для системы оформления тем.
Веб-разработчик проверяет коэффициент контраста между цветом текста и фоном перед выпуском компонента, чтобы убедиться в соответствии требованиям WCAG AA.
Дизайнер для печати получает веб-цвет в HEX и хочет эквивалент CMYK для точного совпадения в печатном буклете.
Разработчик хочет RGB-разбивку токена дизайна для передачи значений отдельных каналов в функцию рисования на Canvas.

Часто задаваемые вопросы

Поддерживает ли инструмент значения альфа (прозрачности)?

Текущий конвертер работает с полностью непрозрачными цветами (альфа = 1). HEXA (8-значный hex) и RGBA пока не входят в область применения. Для прозрачности задайте альфа-канал в CSS отдельно, используя нотацию rgba() или oklch().

Сохраняются ли введённые цвета где-либо или отправляются ли они?

Нет. Преобразование цветов является чистой арифметикой (переотображение каналов и масштабирование диапазонов), выполняемой полностью в движке JavaScript браузера. Ничто из введённого здесь не достигает никакого сервера или внешнего сервиса.

Какие уровни контраста WCAG поддерживает проверяющий инструмент?

Инструмент проверяет по критериям успеха WCAG 2.1: AA требует минимального коэффициента контраста 4.5:1 для обычного текста (ниже 18pt или 14pt полужирного) и 3:1 для крупного текста и элементов интерфейса. AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста.

Почему значения CMYK отличаются от значений в профессиональном дизайнерском ПО?

Преобразование RGB в CMYK, выполняемое этим инструментом, является математической формулой без цветового профиля. Профессиональные дизайнерские приложения применяют ICC-цветовые профили, учитывающие растискивание точек чернил и свойства подложки. Значения CMYK здесь полезны для приблизительной оценки; для производственной печати всегда применяйте профиль пресса в специализированном ПО.

Можно ли конвертировать CSS-имя цвета, например «cornflowerblue»?

Именованные CSS-цвета нельзя вводить непосредственно в поля конвертера. Чтобы конвертировать именованный цвет, сначала найдите его HEX-значение в CSS-справочнике (cornflowerblue это #6495ED), затем вставьте этот HEX в поле HEX для просмотра всех остальных форматов.

Работает ли инструмент офлайн после загрузки страницы?

Да. Преобразование цветов является арифметикой без внешних зависимостей. После того как страница окажется в кэше браузера, можно открыть её без сетевого подключения, и все преобразования будут работать нормально.