Free browser-based tool
Preview how your HTML email renders in dark mode across Gmail, Outlook, Apple Mail, and Samsung Mail using accurate per-client color algorithms.
01
Paste HTML directly, upload an .html file,
or a .zip containing your email and images.
02
Each client's dark mode algorithm runs in your browser — CIELAB color math, brightness thresholds, contrast checks.
03
See live previews side by side. Catch contrast issues, invisible text, and unwanted color inversions before you send.
Each client uses a distinct algorithm. This tool is the first to implement them all accurately.
CIELAB L* inversion with brightness thresholds. Dark text (brightness <150) is inverted; light backgrounds (brightness >205) are inverted. Mid-range colors are left untouched.
Full CIELAB L* inversion applied to all colors unconditionally — the most aggressive transformation of any major client.
Runs a fixContrast() algorithm: checks WCAG 4.5:1 contrast ratio first; if insufficient, uses CIELAB L* to push colors toward a readable extreme.
CIELAB lightness inversion using (target − L) × 0.82, where target L* is 117 (or 127 for reddish-neutral hues). Highly saturated greens get an additional a* shift to prevent muddy output.
Swaps pure black and white, then applies HSL lightness inversion (l = 1 − l) to very bright or very dark colors. Respects the color-scheme meta tag.
Uses Android WebView force-dark (same CIELAB L* inversion as Gmail Android). Respects color-scheme meta tag. Also simulates Samsung's auto-fit scaling — scans HTML width attributes (prioritised over CSS), and if any exceed the ~360px viewport, injects a wider viewport and zooms to fit, often breaking responsive layouts.
Every client implements its own transformation. Gmail Android uses brightness thresholds before CIELAB inversion. Gmail iOS inverts everything. Outlook.com checks contrast ratios. Apple Mail uses HSL inversion. There is no standard — which is why the same email can look completely different across clients.
The most reliable approach is @media (prefers-color-scheme: dark) CSS with explicit dark mode styles — this gives you full control and is respected by Apple Mail. The color-scheme meta tag is only respected by Apple Mail; Gmail and Outlook (all versions) ignore it and apply their own transforms regardless.
No. Everything runs in your browser. Your HTML is never sent to any server — the color math, DOM transformation, and rendering all happen locally in JavaScript.
CIELAB (L*a*b*) is a perceptually uniform color model where equal numerical differences correspond to equal perceived differences. The L* channel represents lightness from 0 (black) to 100 (white). Inverting L* instead of raw RGB produces more natural-looking results that preserve hue and apparent saturation.
Samsung Mail scans every element for HTML width attributes — and checks them before CSS, inverting normal precedence. If any attribute exceeds the ~360px device viewport (e.g. <img width="600">), Samsung injects a wider viewport and zooms the page to fit. Android's text auto-sizing then inflates text back to readable size, but images and layout stay shrunk — making text appear disproportionately large. This algorithm was confirmed via decompilation of Samsung's AutoFit.js from the Samsung Email APK. The fix is to remove pixel width attributes from elements and use CSS max-width instead. For Outlook compatibility, serve the width attribute inside conditional comments that Samsung ignores.
Gmail, Outlook, and Apple Mail algorithms are based on documented behaviour and verified against real devices. Samsung Mail's dark mode uses the same Android WebView force-dark engine as Gmail Android; its auto-fit simulation is based on the decompiled AutoFit.js source from the Samsung Email APK. Real-world rendering can vary slightly by app version, OS version, and account type (Samsung with Exchange accounts loses media query support). Use these previews as a close approximation — always confirm critical sends on real devices.