Статья
Цветовые инструменты для веба: hex, палитры и доступность
Подбор цветов для сайта кажется простым ровно до встречи с hex-кодами, тройками RGB и углами HSL, которые описывают одно и то же по-разному. В статье разбирается, как эти форматы связаны между собой, как превратить один фирменный цвет в пригодную палитру и как добиться того, чтобы результат оставался читаемым для людей, видящих цвет иначе.
Hex, RGB и HSL описывают один и тот же цвет
Цвет на экране смешивается из красного, зелёного и синего света. Запись hex задаёт эти три канала шестисимвольным кодом, например #2563eb, где каждая пара символов это один канал от 00 до ff. RGB записывает те же три числа в десятичном виде, от 0 до 255, что читается легче, но не добавляет ничего нового. HSL заходит с другой стороны: он описывает цвет через тон (положение на цветовом круге от 0 до 360 градусов), насыщенность (насколько он яркий) и светлоту (насколько близок к белому или чёрному). HSL это формат, к которому тянутся дизайнеры, когда хотят подвинуть цвет, ведь поднять светлоту или сдвинуть тон это одно интуитивное изменение, а не три связанных числа. Конвертер позволяет переходить между всеми тремя, чтобы прочитать значение в одном формате и применить его в другом.
Превращение одного цвета в палитру
Одного фирменного цвета редко хватает. Рабочая палитра обычно требует основной цвет, один или два акцента и набор нейтральных серых для текста и фонов. Связи между цветами следуют простым правилам цветового круга: комплементарные цвета лежат напротив друг друга, аналогичные стоят рядом и дают спокойное ощущение, а триадный набор равномерно распределяет три цвета для контраста без диссонанса. Инструмент цветовых схем применяет эти правила к вашему исходному цвету и выдаёт подходящие hex-коды, так что вычислять углы вручную не нужно. Если у вас уже есть изображение, настроение которого вам нравится, экстрактор палитры считывает из него доминирующие цвета, и это быстрый способ построить сайт на основе фотографии или логотипа.
Контраст и дальтонизм
Палитра, отлично выглядящая на вашем экране, всё равно может подвести читателей. Примерно у одного из двенадцати мужчин и одной из двухсот женщин есть та или иная форма нарушения цветовосприятия, чаще всего трудность с различением красного и зелёного. Если единственный признак ошибки это красный текст на зелёной кнопке, такие читатели его не заметят. Решение не в том, чтобы избегать цвета, а в том, чтобы никогда не полагаться на один лишь цвет: сопровождайте его значком, подписью или формой и сохраняйте достаточный контраст по светлоте между текстом и его фоном. Симулятор дальтонизма показывает, как ваша палитра выглядит при распространённых типах цветовосприятия, и проблему можно поймать до выпуска, а не после жалобы.
Делаем всё это в браузере
Ни один из этих шагов не требует сервера. Преобразование hex-кода, генерация схемы, считывание цветов из изображения и моделирование дальтонизма это небольшие вычисления, с которыми браузер справляется мгновенно. Это важно, когда изображение, из которого вы берёте пробу, это невыпущенный дизайн или логотип клиента: с этими инструментами файл остаётся на вашем устройстве и ничего не загружается. Вы получаете тот же результат, что и от онлайн-сервиса, не передавая макет. Конвертер цвета, генератор цветовых схем, экстрактор палитры и симулятор дальтонизма работают локально и так же действуют офлайн после загрузки страницы.
OKLCH и расширенные цветовые пространства
Hex, RGB и HSL описывают цвета в пределах гаммы sRGB, которую экраны используют уже много лет. Новые дисплеи воспроизводят больше, и CSS теперь позволяет обращаться к этому диапазону через функцию color() и цветовое пространство Display P3, которое добавляет насыщенные зелёные и красные тона, недоступные в sRGB. Более существенное изменение связано с OKLCH: это способ записи цвета через светлоту, насыщенность и оттенок, который отражает то, как глаз воспринимает яркость. В HSL жёлтый и синий при одинаковой светлоте 50% выглядят совершенно по-разному: жёлтый кажется ярким, синий кажется тёмным. В OKLCH фиксация светлоты и смена только оттенка сохраняет воспринимаемую яркость постоянной. Это позволяет строить палитры, где каждый оттенок соответствует одному и тому же целевому контрасту с помощью одного числа, без ручной подгонки каждого цвета.
Инструменты из этой статьи
- Конвертер цветовКонвертируйте цвета между HEX, RGB, HSL, HSV и CMYK. Включён проверщик контраста WCAG. Без загрузки.
- Генератор цветовых схемСоздавайте комплементарные, аналоговые, триадные, тетрадные и монохромные палитры из базового цвета. Без загрузки.
- Извлечение цветовой палитрыИзвлекайте доминирующие цвета из изображения в виде образцов HEX. Копируйте любой цвет. Без загрузки.
- Симулятор дальтонизмаСимулируйте протанопию, дейтеранопию, тританопию и ахроматопсию на изображении. Без загрузки.
Частые вопросы
В чём разница между hex и RGB?
Это два способа записать один и тот же цвет. Hex упаковывает каналы красного, зелёного и синего в шестисимвольный код по основанию 16, тогда как RGB перечисляет те же три канала десятичными числами от 0 до 255. #ff0000 и rgb(255, 0, 0) это один и тот же красный. Hex компактен и часто встречается в CSS и файлах дизайна, RGB читается с первого взгляда легче, а перевод между ними ничего не меняет в самом цвете.
Как понять, читаемы ли мои цвета для пользователей с дальтонизмом?
Прогоните палитру через симулятор дальтонизма, который перерисовывает ваши цвета так, как их увидел бы человек с каждым распространённым типом цветовосприятия. Следите за парами, которые сливаются в один оттенок, особенно за красными и зелёными. Самая надёжная привычка это никогда не использовать цвет как единственную подсказку: подкрепляйте его текстом, значком или узором и сохраняйте чёткую разницу по светлоте между передним планом и фоном, чтобы смысл уцелел, даже если тон пропал.