Google corporate palette anchored on the four logo colors — Blue (#4285F4), Red (#EA4335), Yellow (#FBBC04), and Green (#34A853) — used across the Google wordmark, the four-color "G" mark, and the Material Design system primaries. Pairs the four chromatic brand-defining hues with a neutral grey ramp drawn from Material Design's surface and text guidance.
10 swatches 14 light roles 14 dark roles
Swatches
google-blue
#4285F4
First letter of the Google wordmark and the dominant brand blue. Material Design's "Blue 500" — the primary CTA color across many Google product surfaces.
google-red
#EA4335
Second letter of the wordmark. Material's "Red 500" — used as the error / destructive color across Google product UI.
google-yellow
#FBBC04
Third letter of the wordmark. Material's "Yellow 600" — used for highlight, warning, and starred / favorited states.
google-green
#34A853
Fifth letter of the wordmark. Material's "Green 500" — used as the success / confirmation color across Google product UI.
google-grey-900
#202124
Primary text on light backgrounds; Material's "Grey 900" near-black.
google-grey-700
#5F6368
Secondary text and inactive icons. Material's "Grey 700".
google-grey-500
#9AA0A6
Tertiary text and dividers. Material's "Grey 500".
google-grey-200
#E8EAED
Subtle surface and divider tint. Material's "Grey 200".
google-grey-100
#F1F3F4
Page-level background; Material's "Grey 100".
google-white
#FFFFFF
Base background and reversed surface fill.
Mode role mappings
Light mode (14 roles)
accent
→ google-green accent-hover
→ google-green background
→ google-white error
→ google-red primary
→ google-blue primary-hover
→ google-blue success
→ google-green surface
→ google-grey-100 surface-elevated
→ google-white text-primary
→ google-grey-900 text-secondary
→ google-grey-700 text-tertiary
→ google-grey-500 warning
→ google-yellow warning-hover
→ google-yellow Dark mode (14 roles)
accent
→ google-green accent-hover
→ google-green background
→ google-grey-900 error
→ google-red primary
→ google-blue primary-hover
→ google-blue success
→ google-green surface
→ google-grey-700 surface-elevated
→ google-grey-500 text-primary
→ google-white text-secondary
→ google-grey-200 text-tertiary
→ google-grey-500 warning
→ google-yellow warning-hover
→ google-yellow Provenance
- Source
- https://about.google/brand-resource-center/logos-list/
- License
Proprietary — All Rights Reserved- Attribution
- Google, the Google logo, the Google "G" mark, Material Design, and related names and marks are trademarks of Google LLC. Brand colors documented here are published on the Google Brand Resource Center (about.google/brand-resource-center/) and on the Material Design 3 color reference (m3.material.io/styles/color).
- Imported
-
2026-05-17 - Notes
- Brand-atoms' read of Google's public brand-resource and Material Design guidance. This file is not an official Google brand document. Google's actual palette in Material 3 is dynamic (tonal palettes derived per-device); the values here are the canonical four-color logo hues plus a static Material-style neutral ramp suitable for cross-product brand work.