Free browser-based tool
Preview how your HTML email renders in dark mode across Gmail, Outlook, and Apple Mail using real reverse-engineered 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.
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.