Gmail Dark Mode Color Inverter & Simulator

How does Gmail's dark mode affect email colors?

Gmail's dark mode attempts to automatically adjust email colors to be more readable in a dark theme. It often inverts lighter colors to darker ones and adjusts darker colors, though the exact algorithm is not publicly known.

Why are some colors inverted differently than others in Gmail dark mode?

Gmail's color inversion isn't a simple 1:1 inversion. It seems to differentiate between chromatic (colors with hue like red, blue) and achromatic (grays, black, white) colors. Chromatic colors might have their lightness inverted while preserving hue/saturation, while achromatic colors might be mapped to specific dark theme gray values.

Is this tool's color inversion exactly what Gmail does?

No, this tool simulates Gmail's color inversion based on observed behavior. It provides an approximation by inverting lightness for chromatic colors and mapping achromatic colors to dark theme values, but the actual algorithm used by Gmail is proprietary and may differ.

How can I design emails that look good in both light and dark modes?

Designing for both modes requires careful testing. Consider using semantic colors, ensuring sufficient contrast, and using CSS media queries (@media (prefers-color-scheme: dark)) to provide specific dark mode styles if needed. Tools like this simulator can help you preview potential color changes.

1. The CSS mix-blend-mode Trick

This technique uses CSS blending modes to influence how colors are displayed. For example, applying mix-blend-mode: screen; or mix-blend-mode: multiply; to an element (often in conjunction with specific background colors or by layering elements) can help "force" a color to stay light or dark, respectively, even when the email client attempts to invert it.

A common use case is for logos. If an email client inverts a white logo to black when the background becomes dark, mix-blend-mode might help restore its whiteness. It can also be used to try and keep dark elements dark against a lightened background.

How it might work (conceptual examples):

<!-- To help keep an element (e.g., white logo) white -->
<div style="background-color: white;"> <!-- Outer container, might be white or inverted by client -->
    <img src="path/to/your-logo.png" alt="Logo" style="mix-blend-mode: screen; background-color: white;">
</div>

<!-- To help keep black text black on a white background that gets inverted -->
<div style="background-color: black; mix-blend-mode: screen;"> <!-- This black background should invert to white -->
    <p style="color: black; background-color: white; mix-blend-mode: difference;">Text to keep black</p>
</div>

This trick has been observed to have some effect in certain versions of Apple Mail and occasionally Gmail, particularly when Gmail adds its own dark mode classes like [data-ogsc] (for colors) or [data-ogsb] (for backgrounds). You might need to target those specific classes:

/* Example for Gmail if it adds specific attributes */
body[data-ogsc] .my-light-element-class {
    /* Assuming .my-light-element-class is white and you want it to stay white */
    background-color: white !important; /* Ensure the base for blending is white */
    mix-blend-mode: screen !important;
}

body[data-ogsc] .my-dark-text-on-light-bg {
    color: black !important;
    background-color: white !important; /* The original light background */
    /* If Gmail inverts the background to dark and text to light, 'difference' might help */
    mix-blend-mode: difference !important;
}

Caveats: Highly dependent on the email client's rendering engine and its specific dark mode implementation. Support for mix-blend-mode in email is not universal and can be inconsistent. Results can vary significantly and might require targeting client-specific selectors (like those Gmail adds: .gsexpectedclass, [data-ogsc], [data-ogsb]).

2. The CSS Gradient Trick

Some email clients, notably certain versions of Outlook on Windows, may not invert colors if they are defined as part of a CSS gradient background, even if the gradient is just from one color to itself.

For background colors:

.element-with-preserved-background {
    background-color: #FF0000; /* Fallback color */
    background-image: linear-gradient(#FF0000, #FF0000); /* Desired color that might be preserved */
}

For text colors (more complex and relies on -webkit-background-clip: text which has limited email client support):

.text-with-preserved-color {
    color: #0000FF; /* Fallback text color */
    background-image: linear-gradient(#0000FF, #0000FF); /* Desired text color as a gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the original text color transparent to show the gradient */
    /* display: inline-block; or display: block; might be needed for background-clip: text. */
}

Caveats: This trick is primarily known for its effectiveness in specific Outlook versions (especially on Windows). It may not prevent color inversion in other major clients like Gmail or Apple Mail. The text color variant using background-clip: text has even more limited support in email clients compared to the background image trick.