Как заставить цвета электронной почты работать в темном режиме?

Используйте в своем . Используйте @media (prefers-color-scheme: dark) в блоке , чтобы обеспечить переопределение цвета темного режима для поддерживающих клиентов.

Цвет в справочнике по дизайну электронных писем

Подробное руководство по 13 цветовым форматам CSS для 12 почтовых клиентов. Проверьте, какие форматы безопасны для каждого клиента, изучите лучшие практики и избегайте распространенных ошибок при рендеринге электронной почты. От Gmail до Outlook Desktop — точно знайте, какие цвета и где работают.

Color in Email Design Reference

Comprehensive guide to which color formats work across email clients. Check compatibility, safety ratings, and best practices for email development.

Quick Compatibility Reference

Format	Example	Safety
HEX	color: #FF6600;	✓ Safe
Short HEX	color: #F60;	✓ Safe
RGB	color: rgb(255, 102, 0);	~ Mostly Safe
RGBA	color: rgba(255, 102, 0, 0.5);	! Caution
HSL	color: hsl(24, 100%, 50%);	! Caution
HSLA	color: hsla(24, 100%, 50%, 0.5);	✗ Avoid
Named Colors	color: orange;	~ Mostly Safe
currentColor	border-color: currentColor;	! Caution
CSS Custom Properties	color: var(--color-primary);	✗ Avoid

Color Format Reference

13 formats

HEX (#RRGGBB)

#FF6600

✓ Safe

Standard 6-digit hexadecimal color notation. The universal standard for email.

color: #FF6600;

HEX codes are the most widely supported color format across all email clients. Every major client renders 6-digit HEX correctly. This is the gold standard for email color values.

Short HEX (#RGB)

#F60

✓ Safe

3-digit shorthand hexadecimal notation.

color: #F60;

Short HEX is universally supported but limited to 4096 colours (one nibble per channel). Use for simple colours where #RGB equals #RRGGBB (e.g., #FFF, #000, #F00). Prefer full 6-digit for precision.

HEX8 (#RRGGBBAA)

#FF660080

✗ Avoid

8-digit hex with alpha channel. NOT safe for email.

color: #FF660080;

8-digit HEX with alpha is not supported in Outlook Desktop, Gmail, or Yahoo. Most email developers should avoid it entirely. Use a solid HEX fallback instead.

RGB()

rgb(255, 102, 0)

~ Mostly Safe

RGB functional notation. Widely supported in email.

color: rgb(255, 102, 0);

RGB() is supported by most email clients except older versions of Outlook Desktop. It's a good alternative when you need to programmatically adjust colour values. Always include a HEX fallback.

RGBA()

rgba(255, 102, 0, 0.5)

! Caution

RGB with alpha transparency. Not supported in major clients.

color: rgba(255, 102, 0, 0.5);

RGBA is not supported in Gmail, Yahoo, or Outlook Desktop. Apple Mail supports it well. Use only for progressive enhancement with a solid HEX fallback for the base colour.

HSL()

hsl(24, 100%, 50%)

! Caution

Hue-Saturation-Lightness notation. Support varies.

color: hsl(24, 100%, 50%);

HSL works in Apple Mail, Outlook.com, Samsung Email, and the new Outlook 365. It does NOT work in Gmail, Yahoo, or classic Outlook Desktop. Use for non-critical styling with HEX fallbacks.

HSLA()

hsla(24, 100%, 50%, 0.5)

✗ Avoid

HSL with alpha transparency. Very limited support.

color: hsla(24, 100%, 50%, 0.5);

HSLA inherits all the limitations of HSL plus the alpha channel issues of RGBA. Only works in Apple Mail and a few niche clients. Avoid in production email.

HWB()

hwb(24, 0%, 0%)

✗ Avoid

Hue-Whiteness-Blackness. Not supported in email.

color: hwb(24, 0%, 0%);

HWB is a newer CSS Color Level 4 format. No major email client supports it. Avoid entirely for email development.

OKLCH()

oklch(0.62, 0.15, 24)

✗ Avoid

Perceptually uniform colour space. Not supported in email.

color: oklch(0.62, 0.15, 24);

OKLCH is a modern CSS Color Level 4 format. Not supported in any email client. Use only for tooling and pre-processing, never in email CSS.

LAB / LCH()

lab(62%, 35, 45)

✗ Avoid

CIE Lab colour space. Not supported in email.

color: lab(62%, 35, 45);

CIE Lab and LCH are advanced colour spaces not supported in email clients. Avoid for email output.

Named Colors

orange

~ Mostly Safe

CSS named colours like red, blue, orange, etc. Mixed support.

color: orange;

Basic named colours (red, blue, green, black, white, orange, etc.) are widely supported. Obscure named colours (like rebeccapurple, burlywood) may not render in older email clients. Stick to the 16 basic HTML colour names for safety.

currentColor

currentColor

! Caution

Inherits the current text colour. Support varies.

border-color: currentColor;

currentColor works in Apple Mail and Outlook.com but fails in Gmail and Outlook Desktop. Useful for borders and SVG fills in email, but always provide explicit colour fallbacks.

CSS Custom Properties

var(--color-primary)

✗ Avoid

CSS variables. NOT supported in email.

color: var(--color-primary);

CSS custom properties (CSS variables) are not supported in any major email client. Gmail, Outlook, and Yahoo all strip or ignore them. Never use CSS variables in production email - always use static colour values.

Email Color Safety Tips

Always Use HEX as Your Primary Format

CRITICAL

6-digit HEX codes (#RRGGBB) are the only format guaranteed to render correctly across all email clients. When using modern formats like HSL or RGBA, always provide a HEX fallback as the first declaration.

format

Inline Styles Override Everything

CRITICAL

Many email clients (Gmail, Yahoo, Outlook) strip or ignore <style> blocks. Always inline your colour declarations using the style attribute. Use tools like Juice or CSS inliner for automated conversion.

format

Never Use CSS Custom Properties

CRITICAL

CSS variables (var(--color)) look modern but are completely unsupported across all major email clients. Gmail and Outlook both strip them silently, leaving your email without colour. Always hardcode colour values.

format

Provide Outlook Desktop Fallbacks

Important

Outlook Desktop uses Word's rendering engine and ignores many modern CSS properties. Use conditional comments

fallback

Maintain WCAG Contrast in Email

Important

Email accessibility matters. Ensure your text colours have at least 4.5:1 contrast ratio against backgrounds. Remember that email clients may strip your custom CSS in certain contexts, so test critical colour pairs.

accessibility

Test in Gmail First, Outlook Second

Important

Gmail is the most restrictive major client with 30%+ market share. If your colours work in Gmail, they'll work almost everywhere. Outlook Desktop is the second most important test target due to its unique rendering engine.

testing

Don't Rely on Default Link Colors

Important

Email clients often override link colours with their own defaults. Always set explicit colour and text-decoration on your <a> tags inline. Include :visited and :hover states in <style> for clients that support them.

accessibility

Prepare for Dark Mode

Good to Know

Many email clients now auto-invert colours in dark mode. Use <meta name="color-scheme" content="light dark"> and provide dark mode colour overrides using @media (prefers-color-scheme: dark) in a <style> block for supporting clients.

testing

Gradient Backgrounds Need Fallbacks

Important

CSS gradients in background colours work in Apple Mail and Outlook.com but fail in Gmail and Outlook Desktop. Always set a solid background-color before your gradient declaration. The solid colour will show in non-supporting clients.

fallback

Use Bulletproof Backgrounds for Buttons

Good to Know

For CTA buttons in email, use VML (Vector Markup Language) for Outlook Desktop backgrounds and standard CSS for other clients. This technique ensures buttons have the correct colour in all email environments.

fallback

Email Client Color Support

12 clients

Справочное руководство по цветам вашей электронной почты

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

Совместимость между клиентами Подробная таблица поддержки для 12 почтовых клиентов, включая Gmail, Outlook, Apple Mail, Yahoo и другие. Посмотрите, какие именно цветовые форматы работают в каждом клиенте, с помощью четких индикаторов поддерживаемых/неподдерживаемых данных.
Проанализировано 13 цветовых форматов. Каждый цветовой формат CSS, от HEX до OKLCH, рассчитан на безопасность электронной почты. Каждый формат включает примеры синтаксиса, уровень поддержки, рейтинг безопасности и понятное объяснение того, почему он работает или не работает в электронной почте.
10 важных советов по безопасности. Практические рекомендации, упорядоченные по важности — от важных правил (всегда используйте переменные HEX, никогда — CSS) до продвинутых методов (темный режим, пуленепробиваемый фон). Каждый совет включает теги категорий для удобной фильтрации.
Бесплатно и всегда доступно. Это справочное руководство совершенно бесплатно и не требует регистрации. Добавьте его в закладки для ежедневного рабочего процесса разработки электронной почты — все данные локальны и загружаются мгновенно, без каких-либо внешних зависимостей.

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

От разработчиков электронной почты до инженеров по контролю качества — безопасность цвета для всех.

Рабочий процесс разработчиков электронной почты Разработчики электронной почты ежедневно используют этот справочник, чтобы проверить, какие цветовые форматы безопасны, прежде чем писать код для кампаний. Таблица быстрой совместимости дает мгновенные ответы для пяти наиболее распространенных почтовых клиентов.
Маркетинговые кампании по электронной почте Маркетинговые команды используют это руководство, чтобы обеспечить единообразную визуализацию фирменных цветов во всех почтовых клиентах подписчиков. Советы по безопасности помогут избежать распространенных ошибок, таких как неровные градиенты или невидимые кнопки.
Передача дизайна в электронную почту Дизайнеры используют ссылку на цветовой формат, чтобы понять, какие цвета из их проектов сохранятся в процессе рендеринга по электронной почте, что делает передачу разработки более гладкой и с меньшим количеством сюрпризов.
Разработка шаблонов электронной почты Разработчики шаблонов используют детали, специфичные для клиента, для создания надежных шаблонов с соответствующими запасными вариантами для Outlook Desktop, Gmail и других клиентов с ограничениями.
Изучение разработки электронной почты Студенты и младшие разработчики используют это руководство, чтобы изучить основы CSS для электронной почты: какие цветовые форматы безопасны, почему некоторые клиенты ведут себя по-другому и как создавать надежные стили электронной почты.
Тестирование доступности и контроля качества Инженеры по обеспечению качества используют эту ссылку, чтобы убедиться, что выбранные цвета соответствуют стандартам доступности и правильно отображаются в почтовых клиентах, которые их подписчики используют чаще всего.

О цвете в дизайне электронных писем

Понимание поддержки цвета в почтовых клиентах важно для каждого разработчика электронной почты.

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

Gmail удаляет блоки <style> и обрабатывает встроенные стили через уровень очистки, который допускает только подмножество свойств и значений CSS. RGBA, HSL и другие современные форматы не входят в список разрешенных Gmail. Всегда используйте 6-значные шестнадцатеричные коды для совместимости с Gmail.

Шестизначный шестнадцатеричный формат (#RRGGBB) — это самый безопасный и наиболее универсально поддерживаемый цветовой формат во всех почтовых клиентах. Каждый крупный клиент, включая Gmail, Outlook (как веб-, так и настольный), Apple Mail и Yahoo, правильно отображает HEX-коды при встроенном применении.

Да. Outlook Desktop использует механизм рендеринга Microsoft Word, а не веб-браузер. Это означает, что у него очень ограниченная поддержка CSS — ни RGBA, ни HSL, ни градиентов CSS. Вот почему Outlook Desktop требует особого подхода при разработке электронной почты.

HSL работает в Apple Mail, Outlook.com, Samsung Email и новом Outlook 365 на базе Chromium. Он НЕ работает в Gmail, Yahoo или классическом Outlook Desktop. Используйте HSL как прогрессивное улучшение с запасным вариантом HEX.

Нет. Пользовательские свойства CSS (var(--color)) не поддерживаются ни одним крупным почтовым клиентом. Gmail и Outlook удаляют их молча. Никогда не используйте переменные CSS в рабочей электронной почте.

HEX (#RRGGBB) состоит из 6 цифр и представляет сплошные цвета. HEX8 (#RRGGBBAA) включает альфа-канал для прозрачности. HEX8 не поддерживается в Gmail, Outlook Desktop и Yahoo. Придерживайтесь стандартного 6-значного HEX для электронной почты.

Используйте <meta name="color-scheme" content="light dark"> в своем <head>. Используйте @media (prefers-color-scheme: dark) в блоке <style>, чтобы обеспечить переопределение цвета темного режима для поддерживающих клиентов.

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