Цвет в email: как выбрать палитру и не сломать письмо в разных клиентах
Цвет в письме работает на нескольких уровнях одновременно: создаёт узнаваемость бренда, направляет взгляд читателя и влияет на конверсию. При этом email — среда с ограничениями. Цвет, который выглядит идеально в редакторе, может выглядеть иначе в Outlook или в тёмной теме. Разберём, как выбрать палитру и избежать типичных проблем.
Как цвет работает в письме
Цвет выполняет несколько функций в структуре письма.
Иерархия. Более насыщенный или контрастный цвет привлекает внимание первым. Кнопка с призывом к действию должна выделяться на фоне остального письма — это достигается цветом.
Узнаваемость. Фирменные цвета в шапке, кнопках и акцентах создают визуальную связь с брендом. Подписчик открывает письмо и сразу понимает, от кого оно, ещё до того как прочитал тему.
Настроение. Тёплые цвета создают ощущение энергии и срочности, холодные — спокойствия и доверия. Это влияет на восприятие контента и оффера.
Как выбрать палитру
Для большинства рассылок достаточно трёх‑четырёх цветов.
Основной цвет бренда. Используется в шапке, акцентах, кнопках. Должен совпадать с цветом бренда на сайте и в других материалах.
Нейтральный фон. Белый или очень светлый серый для фона письма. Тёмный фон для всего письма используют редко — он повышает нагрузку на глаза и хуже работает в тёмной теме.
Акцентный цвет. Для кнопок, подчёркиваний, иконок. Может совпадать с основным цветом бренда или быть контрастным дополнением.
Цвет текста. Основной текст — тёмно‑серый (#333333 или #222222), а не чисто чёрный. Чисто чёрный текст на белом фоне даёт слишком высокий контраст и утомляет при чтении.
Оранжевый блок с ценой выделяется на белом фоне и сразу притягивает взгляд. Один акцентный цвет работает лучше, чем несколько конкурирующих.
Контраст и читаемость
Достаточный контраст между текстом и фоном — не только вопрос эстетики, но и доступности. Слабый контраст делает текст нечитаемым для людей с нарушениями зрения.
Минимальный коэффициент контраста по стандарту WCAG — 4.5:1 для обычного текста и 3:1 для крупного заголовка. Проверить контраст можно через сервис Contrast Checker — введите цвет текста и фона, получите коэффициент.
Самые частые проблемы с контрастом: светло‑серый текст на белом фоне, белый текст на светло‑голубом фоне, жёлтый текст на белом фоне.
Цвет в тёмной теме
Тёмная тема — главная сложность при работе с цветом в email. Почтовые клиенты по‑разному обрабатывают цвета при включённом dark mode.
Что происходит с цветами. Gmail на Android инвертирует тёмный текст на светлом фоне — белый текст становится тёмным, светлый фон темнеет. Apple Mail применяет собственные алгоритмы. Outlook инвертирует только некоторые элементы.
Что это значит на практике. Логотип тёмного цвета на прозрачном фоне в тёмной теме станет невидимым. Светлый текст на светлом фоне, прописанный в инлайн‑стилях, может стать нечитаемым после инверсии.
Как защититься. Готовьте две версии логотипа — тёмную и светлую. Используйте CSS-медиазапрос prefers-color-scheme для управления цветами в тёмной теме. Проверяйте письмо в тёмном режиме через предпросмотр в редакторе.
Письмо Яндекс Рекламы с тёмным фоном и цветными карточками программы. Контраст между тёмным фоном и яркими блоками создаёт чёткую иерархию.
Цвет фона письма и контейнера
В письме обычно два уровня фона: фон всей страницы и фон контейнера с контентом.
Фон страницы — то, что видно по бокам письма в почтовом клиенте. Обычно светло‑серый (#f4f4f4 или #f0f0f0). Он создаёт обрамление и визуально выделяет письмо.
Фон контейнера — непосредственно область с контентом. Чаще всего белый.
Некоторые почтовые клиенты игнорируют фон страницы и показывают свой собственный фон — учитывайте это при проверке.
Timeweb Cloud использует фирменный синий только в шапке — остальное письмо белое. Один цветной блок создаёт узнаваемость без перегрузки.
Цвет кнопки
Кнопка с призывом к действию — самый важный элемент с точки зрения конверсии. Её цвет должен выделяться на фоне письма и быть заметным.
Несколько правил.
Кнопка должна контрастировать с фоном секции, в которой стоит. Если фон белый, синяя или зелёная кнопка работает хорошо. Если фон уже синий, кнопку делают белой или контрастного цвета.
Используйте один цвет кнопки во всём письме. Если кнопок несколько, они должны быть одинакового цвета — иначе иерархия теряется.
Проверьте кнопку в Outlook. Если кнопка сделана через CSS background-color на теге <a>, Outlook её не отобразит. Используйте bulletproof-кнопки на основе таблиц или VML.
Типичные ошибки с цветом
Слишком много цветов. Более четырёх‑пяти цветов в одном письме создают визуальный хаос. Каждый дополнительный цвет должен выполнять конкретную функцию.
Цвет текста в инлайн‑стилях конфликтует с тёмной темой. Если прописать color: #000000 в инлайн‑стиле, почтовый клиент в тёмной теме не сможет изменить этот цвет автоматически — чёрный текст на тёмном фоне станет нечитаемым.
Фирменный цвет не адаптирован для экрана. Цвет в печати (CMYK) и на экране (RGB) выглядит по‑разному. Убедитесь, что у вас есть правильный HEX-код фирменного цвета для экранного использования.
Не проверен контраст кнопки. Белый текст на жёлтой кнопке — классический пример плохого контраста, который выглядит ярко, но нечитаемо.
Итог
Для большинства рассылок достаточно трёх‑четырёх цветов: основной цвет бренда, нейтральный фон, акцент для кнопок и тёмно‑серый для текста. Главное — проверять контраст, тестировать тёмную тему и убеждаться, что кнопка работает в Outlook.
Читайте также: