Gmail
Gmail's product palette, anchored on the 2020-refresh envelope mark — a multicolor "M" rendered in the four Google brand hues (Blue, Green, Yellow, Red) with a deeper Crimson accent for the envelope interior. Gmail is a product-brand under the Google parent: the typography and corporate voice inherit from Google, while these envelope-specific swatches are the visual fingerprint of the Gmail mark itself.
10 swatches 14 light roles 14 dark roles
Swatches
gmail-red
#EA4335
Right downstroke of the Gmail "M" envelope. Google Red / Material Red 500 — the canonical Google four-color red.
gmail-crimson
#C5221F
Deeper red used for the envelope interior fold in the 2020 Gmail icon. Provides depth between the outer Red and the inner envelope face.
gmail-yellow
#FBBC04
Right-of-center valley of the "M". Google Yellow / Material Yellow 600 — used for highlight and starred states inside the Gmail UI.
gmail-green
#34A853
Left-of-center valley of the "M". Google Green / Material Green 500 — used as the canonical success / send-confirmed hue in Gmail product chrome.
gmail-blue
#4285F4
Left downstroke of the "M". Google Blue / Material Blue 500 — Gmail's primary action color (Compose button, link affordance).
gmail-grey-900
#202124
Primary text on light surfaces; near-black drawn from Material Grey 900 to match the Google parent.
gmail-grey-700
#5F6368
Secondary text and inactive icons (Material Grey 700).
gmail-grey-200
#E8EAED
Divider and subtle surface tint (Material Grey 200).
gmail-grey-100
#F1F3F4
Page-level background — Gmail's product chrome uses this warm light-grey as the inbox canvas.
gmail-white
#FFFFFF
Base background and reversed surface fill.
Mode role mappings
Light mode (14 roles)
accent
→ gmail-red accent-hover
→ gmail-crimson background
→ gmail-white border
→ gmail-grey-200 error
→ gmail-red primary
→ gmail-blue primary-hover
→ gmail-blue success
→ gmail-green surface
→ gmail-grey-100 surface-elevated
→ gmail-white text-primary
→ gmail-grey-900 text-secondary
→ gmail-grey-700 warning
→ gmail-yellow warning-hover
→ gmail-yellow Dark mode (14 roles)
accent
→ gmail-red accent-hover
→ gmail-crimson background
→ gmail-grey-900 border
→ gmail-grey-700 error
→ gmail-red primary
→ gmail-blue primary-hover
→ gmail-blue success
→ gmail-green surface
→ gmail-grey-700 surface-elevated
→ gmail-grey-700 text-primary
→ gmail-white text-secondary
→ gmail-grey-200 warning
→ gmail-yellow warning-hover
→ gmail-yellow Provenance
- Source
- https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg
- License
Proprietary — All Rights Reserved- Attribution
- Gmail and the Gmail envelope mark are trademarks of Google LLC. The five fill colors documented here are the exact hex values declared in the canonical 2020 Gmail icon SVG hosted on Wikimedia Commons, mirrored from Google's public brand assets.
- Imported
-
2026-05-18 - Notes
- Brand-atoms' read of the public Gmail 2020 envelope icon. This file is not an official Google brand document. Gmail inherits its typography and corporate voice from the Google parent atom (see brands/google/1.0.0); these swatches are scoped to the product mark itself. The four Google hues are intentionally identical to the values in palettes/google@1 — Gmail uses the same canonical four-color set with a fifth Crimson Dark accent for the envelope interior fold.
