Выбор цвета

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

Что показывает инструмент выбора цвета?

Инструмент возвращает числовое представление цвета, выбранного на цветовом круге. Один и тот же видимый цвет можно записать в нескольких форматах. Чаще всего используются шестнадцатеричный код, RGB, RGBA, HSL и HSLA.

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

• Шестнадцатеричные значения: состоят из символа решётки и шестнадцатеричных цифр, например #336699.
• RGB: обычно задаёт каждый канал числом от 0 до 255, например rgb(51, 102, 153).
• HSL: описывает угол цветового тона, а также насыщенность и светлоту в процентах, например hsl(210, 50%, 40%).
• RGBA и HSLA: позволяют задавать прозрачность. Значение альфа-канала 0 соответствует полной прозрачности, а 1 означает полную непрозрачность.

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

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

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

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

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

Как читать результат

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

При использовании в CSS или структурированных данных синтаксис цвета должен строго соблюдаться. При ручном редактировании часто допускают следующие ошибки:

• пропускают начальный символ решётки в шестнадцатеричном значении CSS;
• используют пять или семь шестнадцатеричных цифр, хотя такая длина не соответствует стандартному формату;
• указывают проценты там, где реализация RGB ожидает числовые значения каналов;
• забывают запятые в устаревшем синтаксисе RGB или смешивают несовместимые старый и современный варианты синтаксиса;
• копируют значение с альфа-каналом в программу, которая принимает только шестизначный шестнадцатеричный код;
• используют десятичную запятую, например 0,5, хотя в CSS требуется десятичная точка, например 0.5.

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

Примеры преобразования цветов

В шестизначном шестнадцатеричном коде пары цифр соответствуют красному, зелёному и синему каналам. Например, следующие записи описывают один и тот же непрозрачный цвет.

Шестнадцатеричное значение #336699

Эквивалент в RGB rgb(51, 102, 153)

Эквивалент в HSL hsl(210, 50%, 40%)

Трёхзначный шестнадцатеричный код представляет собой сокращённую запись. Каждая цифра повторяется, образуя шестизначное значение.

Краткий шестнадцатеричный код #fff

Полный шестнадцатеричный код #ffffff

Эквивалент в RGB rgb(255, 255, 255)

В восьмизначном шестнадцатеричном коде альфа-канал указывается после пар красного, зелёного и синего каналов. Учитывай, что некоторые системы используют другой порядок каналов или не поддерживают восьмизначную запись. Кроме того, один и тот же сплошной цвет может дать другой визуальный результат, если применить прозрачность поверх другого фона.

Какой формат цвета выбрать?

Используй формат, который уже ожидает целевая система, если нет веской причины его менять. Шестизначный шестнадцатеричный код компактен и часто встречается в переменных CSS и файлах дизайн-токенов. RGB удобен, когда программа предоставляет прямой доступ к значениям каналов, а HSL подходит для создания связанных цветов путём изменения светлоты или насыщенности.

• Используй шестизначный шестнадцатеричный код для непрозрачного веб-цвета, если важны краткость и понятность записи.
• Используй восьмизначный шестнадцатеричный код только в том случае, если целевая среда явно поддерживает альфа-канал в такой записи.
• Выбирай RGB или RGBA при работе с отдельными красным, зелёным и синим каналами.
• Выбирай HSL или HSLA для программного создания вариантов темы на основе цветового тона, насыщенности или светлоты.
• Используй "Конвертер цветов", если значение уже есть и его нужно преобразовать, а не выбирать новый цвет визуально.

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

Когда не нужно выбирать или конвертировать цвет?

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

Иногда лучше сохранить именованный дизайн-токен, например переменную темы, а не заменять его буквальным значением. Токены сохраняют связь между компонентами и позволяют централизованно менять цвет. Цвету, который используется только системой, также не нужно более понятное человеку представление, если его не требуется просматривать или поддерживать вручную.

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

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

Можно ли использовать результат в переменных CSS?

Да, если выбранная запись соответствует синтаксису CSS и поддерживается нужными браузерами и инструментами сборки. Сохрани полное значение в пользовательском свойстве, а затем обращайся к нему с помощью функции var(). Если проект работает с каналами по отдельности, удобнее хранить их в соответствии с уже принятыми в проекте правилами.

Почему один и тот же цвет выглядит по-разному на разных экранах?

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

Влияет ли регистр букв в шестнадцатеричном коде на цвет?

Нет. Шестнадцатеричные цифры от A до F не зависят от регистра, поэтому #AABBCC и #aabbcc обозначают один и тот же цвет. Соблюдай правила регистра, принятые в репозитории, чтобы не создавать изменения, затрагивающие только форматирование.

Может ли значение цвета содержать символы с диакритикой или буквы не из латиницы?

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

Прозрачный цвет означает отсутствие цвета?

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

Нужно ли округлять дробные значения каналов?

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