Bagaimana cara membuat warna email berfungsi dalam mode gelap?

Gunakan di Anda. Gunakan @media (prefers-color-scheme: dark) di blok untuk memberikan penggantian warna mode gelap untuk mendukung klien.

Warna dalam Referensi Desain Email

Panduan komprehensif untuk 13 format warna CSS di 12 klien email. Periksa format mana yang aman untuk setiap klien, pelajari praktik terbaik, dan hindari kesalahan umum dalam rendering email. Dari Gmail hingga Outlook Desktop - ketahui dengan pasti warna mana yang dapat digunakan.

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

Panduan Referensi Warna Email Anda

Semua yang Anda perlukan untuk memilih format warna yang tepat untuk setiap klien email.

Kompatibilitas Klien-demi-Klien Matriks dukungan terperinci untuk 12 klien email termasuk Gmail, Outlook, Apple Mail, Yahoo, dan banyak lagi. Lihat dengan tepat format warna mana yang berfungsi di setiap klien dengan indikator yang didukung/tidak didukung dengan jelas.
13 Format Warna Dianalisis Setiap format warna CSS dari HEX hingga OKLCH dinilai untuk keamanan email. Setiap format menyertakan contoh sintaksis, tingkat dukungan, peringkat keamanan, dan penjelasan sederhana dalam bahasa Inggris tentang mengapa format ini berfungsi atau tidak di email.
10 Tips Keselamatan Kritis Praktik terbaik yang dapat ditindaklanjuti yang disusun berdasarkan kepentingannya - mulai dari aturan penting (selalu gunakan HEX, jangan pernah menggunakan variabel CSS) hingga teknik tingkat lanjut (mode gelap, latar belakang antipeluru). Setiap tip menyertakan tag kategori untuk memudahkan pemfilteran.
Gratis & Selalu Tersedia Panduan referensi ini sepenuhnya gratis tanpa perlu mendaftar. Tandai untuk alur kerja pengembangan email harian Anda - semua data bersifat lokal dan dimuat secara instan tanpa ketergantungan eksternal.

Siapa yang Menggunakan Referensi Warna Email?

Dari pengembang email hingga teknisi QA - keamanan warna untuk semua orang.

Alur Kerja Pengembang Email Pengembang email menggunakan referensi ini setiap hari untuk memeriksa format warna mana yang aman sebelum membuat kode kampanye. Tabel kompatibilitas cepat memberikan jawaban instan untuk lima klien email paling umum.
Kampanye Pemasaran Email Tim pemasaran menggunakan panduan ini untuk memastikan warna merek mereka ditampilkan secara konsisten di semua klien email pelanggan. Kiat keselamatan membantu menghindari kesalahan umum seperti gradien rusak atau tombol tidak terlihat.
Desain-ke-Email Handoff Desainer menggunakan referensi format warna untuk memahami warna mana dari desain mereka yang akan bertahan dalam proses rendering email, membuat handoff ke pengembangan lebih lancar dan lebih sedikit kejutan.
Pengembangan Templat Email Pengembang templat mereferensikan detail khusus klien untuk membuat templat yang kuat dengan fallback yang sesuai untuk Outlook Desktop, Gmail, dan klien terbatas lainnya.
Mempelajari Pengembangan Email Siswa dan pengembang junior menggunakan panduan ini untuk mempelajari dasar-dasar CSS email - format warna apa yang aman, mengapa klien tertentu berperilaku berbeda, dan cara membuat gaya email antipeluru.
Aksesibilitas & Pengujian QA Teknisi QA menggunakan referensi ini untuk memverifikasi bahwa pilihan warna memenuhi standar aksesibilitas dan akan ditampilkan dengan benar di klien email yang paling sering digunakan pelanggan mereka.

Tentang Warna dalam Desain Email

Memahami dukungan warna di klien email sangat penting bagi setiap pengembang email.

Pertanyaan yang Sering Diajukan

Gmail menghapus blok <style> dan memproses gaya sebaris melalui lapisan sanitasi yang hanya mengizinkan sebagian properti dan nilai CSS. RGBA, HSL, dan format modern lainnya tidak ada dalam daftar yang diizinkan Gmail. Selalu gunakan kode HEX 6 digit untuk kompatibilitas Gmail.

Heksadesimal 6 digit (#RRGGBB) adalah format warna paling aman dan didukung secara universal di semua klien email. Setiap klien besar - termasuk Gmail, Outlook (web dan desktop), Apple Mail, dan Yahoo - merender kode HEX dengan benar saat diterapkan secara inline.

Ya. Outlook Desktop menggunakan mesin rendering Microsoft Word, bukan browser web. Ini berarti dukungan CSS-nya sangat terbatas - tanpa RGBA, tanpa HSL, tanpa gradien CSS. Inilah sebabnya mengapa Outlook Desktop memerlukan penanganan khusus dalam pengembangan email.

HSL berfungsi di Apple Mail, Outlook.com, Samsung Email, dan Outlook 365 berbasis Chromium baru. HSL TIDAK berfungsi di Gmail, Yahoo, atau Outlook Desktop klasik. Gunakan HSL sebagai peningkatan progresif dengan penggantian HEX.

Tidak. Properti khusus CSS (var(--color)) tidak didukung di klien email utama mana pun. Gmail dan Outlook menghapusnya secara diam-diam. Jangan pernah menggunakan variabel CSS dalam email produksi.

HEX (#RRGGBB) terdiri dari 6 digit dan mewakili warna solid. HEX8 (#RRGGBBAA) menyertakan saluran alfa untuk transparansi. HEX8 tidak didukung di Gmail, Outlook Desktop, atau Yahoo. Tetap gunakan HEX 6 digit standar untuk email.

Gunakan <meta name="color-scheme" content="light dark"> di <head> Anda. Gunakan @media (prefers-color-scheme: dark) di blok <style> untuk memberikan penggantian warna mode gelap untuk mendukung klien.

Ya. Saat klien email memperbarui mesin renderingnya, kami memperbarui data kompatibilitas untuk mencerminkan status dukungan warna klien email saat ini.