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

Конвертер цветов представляет собой бесплатный инструмент, который преобразует цвет из формата HEX, HEX alpha, RGB, RGBA, HSV, HSL или HSLA сразу в несколько эквивалентных форматов.

Какие форматы цветов можно конвертировать?

Введи значение в формате HEX, HEX alpha, RGB, RGBA, HSV, HSL или HSLA, чтобы получить соответствующие значения во всех поддерживаемых форматах. Это удобно, когда в дизайн-макете, таблице стилей или стороннем API один и тот же цвет записан по-разному.

• HEX представляет красный, зелёный и синий каналы шестнадцатеричными парами, обычно в виде #RRGGBB.
• HEX Альфа добавляет канал непрозрачности. В современном синтаксисе CSS обычно используется запись #RRGGBBAA.
• RGB задаёт значения красного, зелёного и синего каналов, как правило, в диапазоне от 0 до 255.
• RGBA добавляет к RGB альфа-канал прозрачности.
• HSV описывает цветовой тон, насыщенность и значение. Этот формат часто встречается в инструментах выбора цвета, но не является стандартной цветовой функцией CSS.
• HSL описывает цветовой тон, насыщенность и светлоту. CSS напрямую поддерживает HSL.
• HSLA представляет собой HSL с альфа-значением.

RGB и HSL представляют собой разные математические способы описания цвета, а не разные цвета. Конвертация меняет способ записи, сохраняя исходный цвет настолько точно, насколько позволяет целевой формат.

Как пользоваться конвертером цветов?

Введи одно полное значение цвета в поле Color в любом из поддерживаемых форматов, затем просмотри или скопируй полученные значения из полей результата.

1. Точно скопируй исходное значение вместе с начальным знаком решётки, запятыми, скобками, знаками процентов или альфа-компонентом, если они используются.
2. Вставь его в поле Color.
3. Посмотри эквивалентные значения в полях HEX, HEX Альфа, RGB, RGBA, HSV, HSL и HSLA.
4. Выбери из поддерживаемых форматов тот, который принимает целевая система. Для правил CSS обычно подходят HEX, RGB, RGBA, HSL и HSLA. HSV чаще используется в интерфейсах редактирования и при расчётах цвета.

Конвертация выполняется на сервере. Введённое значение передаётся на сервер по HTTPS и не сохраняется. Отдельный цвет редко бывает конфиденциальным, но перед отправкой данных в любой онлайн-сервис подумай, не является ли конфиденциальной ещё не опубликованная палитра или набор дизайн-токенов.

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

Как читать результаты конвертации?

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

В шестизначном HEX первая пара обозначает красный канал, вторая зелёный, а третья синий. Например, #336699 содержит шестнадцатеричные значения каналов 33, 66 и 99, которым соответствуют десятичные значения RGB 51, 102 и 153.

Цветовой тон обычно задаётся как угол на цветовом круге. Насыщенность, светлота или значение обычно указываются в процентах. Светлота HSL и значение HSV рассчитываются по-разному, поэтому их проценты нельзя сравнивать так, будто они измеряют одно и то же свойство.

Альфа-канал описывает непрозрачность. Для полностью непрозрачного цвета формат с альфа-каналом не нужен, а для полупрозрачного необходим. Если скопировать цвет RGBA или HSLA в обычный RGB, HSL или шестизначный HEX, целевая запись не позволит сохранить альфа-канал.

Этот конвертер не заявлен как валидатор синтаксиса с подробными диагностическими сообщениями. Не рассчитывай, что он точно укажет ошибочный символ в некорректном значении. К распространённым ошибкам относятся отсутствующий знак решётки в HEX, непарные скобки, пропущенные знаки процентов, альфа-значение вне ожидаемого диапазона и смешение правил записи каналов HSL и RGB.

Примеры конвертации цветов

Простой пример показывает связь между HEX, RGB, HSL и HSV. Чистый красный цвет можно записать в следующих эквивалентных формах.

• Значение HEX #ff0000
• Эквивалент RGB rgb(255, 0, 0)
• Эквивалент HSL hsl(0, 100%, 50%)
• Эквивалент HSV hsv(0, 100%, 100%)

Для менее насыщенного цвета #336699 эквивалентом будет rgb(51, 102, 153). В формате HSL он записывается как hsl(210, 50%, 40%), а в формате HSV имеет цветовой тон 210 градусов, насыщенность около 66.7% и значение 60%. Интерфейс может округлять десятичные значения или расставлять пробелы иначе, не меняя практического смысла цвета.

Прозрачность можно показать ещё на одном простом примере. rgba(255, 0, 0, 0.5) и hsla(0, 100%, 50%, 0.5) обозначают красный цвет с непрозрачностью 50%. В распространённой восьмизначной записи CSS HEX ему соответствует #ff000080, где 80 представляет собой квантованное байтовое значение альфа-канала.

Когда стоит конвертировать цвет?

Конвертация нужна, если принимающее приложение требует другой формат записи или если иное представление упрощает отладку. Например, можно преобразовать значение из Figma в пользовательское свойство CSS, проверить значение RGBA из Chrome DevTools, подготовить поля цветов для данных API или просмотреть данные сторонней темы перед развёртыванием.

Если целевая система уже поддерживает текущую запись цвета, конвертация обычно не нужна. Нет особого смысла преобразовывать шестизначный HEX в RGB только ради машиночитаемого CSS. Кроме того, преобразование туда и обратно может привести к округлению значений HSL или HSV. Не стоит добавлять альфа-канал, если все цвета заведомо полностью непрозрачны.

Если нужно подобрать цвет визуально, а не преобразовать уже известное значение, удобнее использовать инструмент Выбор цвета. Конвертация также не заменяет проверку контрастности, симуляцию особенностей цветового восприятия и управление цветовыми профилями. Эквивалентность числовых значений не доказывает, что текст на переднем плане соответствует требованиям WCAG к контрастности.

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

Можно ли вводить названия цветов из CSS?

Нет. В список поддерживаемых форматов входят HEX, HEX alpha, RGB, RGBA, HSV, HSL и HSLA, поэтому такие названия, как red, rebeccapurple или transparent, не указаны в качестве допустимых входных данных. Сначала преобразуй именованный цвет в числовое значение CSS, а затем введи его в конвертер.

Поддерживает ли конвертер трёхзначный HEX?

Поддерживаемая длина HEX не указана, хотя HEX входит в список допустимых форматов. Для предсказуемого результата разворачивай сокращённую запись, например #369, в #336699. То же правило относится к четырёхзначной сокращённой записи с альфа-каналом.

Можно ли вставить декларацию CSS целиком?

Нет, вводи только значение цвета, а не всю декларацию. Например, используй #336699 вместо color: #336699;, поскольку имя свойства и точка с запятой не являются частью самого цвета. Если копируешь значение из JSON или конфигурационного файла, убери окружающие его кавычки.

Сохранятся ли широкий цветовой охват и данные цветового профиля?

Нет, форматы с широким цветовым охватом и встроенные цветовые профили не указаны как поддерживаемые. Display P3, Lab, LCH и данные профилей ICC содержат информацию, которую невозможно выразить в доступных полях HEX, RGB, HSL и HSV. Если при конвертации необходимо учитывать цветовой профиль, используй приложение с поддержкой управления цветом.

Почему после конвертации появляются дробные числа?

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