Полезные статьи
HEX, RGB и HSL: как выбрать формат для задачи
HEX компактен и привычен в CSS: шесть или восемь символов после решётки описывают цвет и при необходимости прозрачность. RGB интуитивен, когда вы настраиваете красный, зелёный и синий ползунки в графическом редакторе. HSL удобен для подбора оттенка: меняя только осветлённость, вы сохраняете «родственные» цвета палитры без ручного пересчёта компонентов.
В вёрстке чаще всего встречается HEX или rgb()/rgba(). HSL всё чаще используют в дизайн-системах, потому что проще строить тёмную тему: смещаете диапазон L для фона и текста, сохраняя узнаваемый оттенок бренда.
- При копировании из Figma проверяйте, в каком цветовом пространстве экспорт — sRGB по умолчанию не везде.
- Для градиентов важна согласованность: не смешивайте HSL и LAB в одной цепочке без конвертации.
- Восьмизначный HEX с альфой поддерживается не всеми старыми браузерами — имейте fallback.
- Именованные цвета вроде
redлучше заменить на HEX для предсказуемости между движками. - Нормализуйте регистр HEX в команде — так проще сравнивать диффы в Git.
Конвертер на странице помогает быстро «перевести» цвет между форматами, не открывая тяжёлые программы.
Контраст текста и фона: зачем дизайнерам и разработчикам одни и те же цифры
Рекомендации WCAG задают минимальный контраст между текстом и фоном. Для обычного текста уровень AA обычно требует не менее 4.5:1, для крупного заголовка — чуть мягче. Если контраст ниже, часть пользователей с ослабленным зрением или при ярком солнце на экране просто не прочитает интерфейс.
Серый текст на цветном фоне выглядит «стильно», но чаще всего именно он проваливает проверку. Перед релизом прогоните пару ключевых сочетаний через автоматический аудит — дешевле, чем переделывать после жалоб.
- Проверяйте не только основной текст, но и подписи к полям, плейсхолдеры и иконки-кнопки.
- Учитывайте состояние
:hoverи:disabled— контраст должен оставаться читаемым. - Для ссылок внутри абзаца контраст нужен и у самой ссылки, и у окружающего текста.
- Если фон градиентный, берите худший участок под текстом.
После конвертации в другой формат пересчитайте контраст ещё раз — при изменении L в HSL он меняется нелинейно относительно sRGB.
Монитор, бумага и печать: почему цвет «плывёт»
На экране цвет аддитивный (свет излучается), на бумаге — субтрактивный (краска поглощает часть спектра). Поэтому «тот же HEX» на мониторе и на визитке выглядит по-разному. Калибровка монитора, профиль ICC и освещение в помещении влияют на восприятие даже без печати.
Для брендбука фиксируют и цифровые значения, и допустимые отклонения при печати по вееру Pantone или по CMYK. Веб-страница редко требует такой жёсткости, но для логотипа на упаковке лучше заранее согласовать эталон.
- Рабочий поток: дизайн в sRGB → проверка на нескольких устройствах → передача макета в типографию.
- Не доверяйте одному скриншоту в мессенджере — он проходит сжатие и меняет гамму.
- Для UI в тёмной теме проверяйте блики на глянцевых экранах — слишком яркие акценты утомляют.
Конвертер помогает удержать выбранный оттенок при переходе между моделями без ручного пересчёта коэффициентов.
Практические советы по палитрам и оттенкам
Соберите небольшую палитру из основного, вторичного, нейтралей и семантических цветов (успех, ошибка, предупреждение). Запишите значения в одном формате и приложите к репозиторию — так фронтенд и дизайн говорят на одном языке.
При осветлении цвета в HSL не уходите в «меловой» диапазон без проверки контраста с белым текстом. При затемнении следите, чтобы тени не стали «грязными» — иногда лучше слегка сместить оттенок (H), а не только уменьшать L.
- Для данных на графиках используйте палитры с различимыми оттенками при протанопии/дейтеранопии.
- Храните «исходник» палитры в дизайн-токенах, а в CSS генерируйте переменные.
- Не полагайтесь только на цвет для статуса — добавьте иконку или подпись.
- Периодически синхронизируйте токены с фактическими значениями в коде скриптом проверки.
Онлайн-конвертер ускоряет эксперименты: быстро подобрали HSL, скопировали HEX в буфер и вставили в стили.
Полезные советы
🎨 HEX формат
6 символов: #FF5733. Первые два — красный, средние — зелёный, последние — синий.
📊 RGB формат
Три числа 0-255. rgb(255, 87, 51). Используется в CSS и графических редакторах.
🌈 HSL формат
Тон (0-360), насыщенность (%), светлость (%). Удобнее для подбора оттенков.
💡 Контрастность
Для текста на цветном фоне проверяйте контрастность. Минимум 4.5:1 по WCAG.
Онлайн конвертер цветов
Бесплатный инструмент для конвертации цветов между форматами HEX, RGB и HSL. Выберите цвет палитрой или введите значение в любом формате — остальные обновятся автоматически.
Форматы цвета
HEX — шестнадцатеричная запись, стандарт для веба. RGB — три компоненты красного, зелёного и синего. HSL — тон, насыщенность, светлость, удобен для создания палитр.