Google Color Palette
TechGoogle's four-color brand palette — blue, red, yellow, and green — represents the company's playful yet systematic approach to design, carried across all products through Material Design.
google.comGoogle logo is a trademark of Google. Used for informational purposes.
Brand Colors
Google Blue
primary
Google Red
secondary
Google Yellow
accent
Surfaces & Borders
Google White
background
Google Surface
surface
Google Border
border
Typography
Google Text
textPrimary
Google Secondary
textSecondary
Google Muted
textMuted
Semantic Colors
Google Green
success
Google Amber
warning
Google Error Red
error
Google Info Blue
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
Google's palette is a tetrad of primary colors (blue, red, yellow, green) that break from traditional corporate blue-only branding. This four-color system appears simple but is carefully balanced to work across thousands of products.
- Blue leads as the dominant brand color (60%), with red, yellow, and green sharing supporting roles (≈13% each)
- The four colors maintain similar saturation and brightness levels for visual harmony
- Neutral grays bridge the gap between the vibrant brand colors and functional UI elements
Color Psychology
The primary-color palette evokes approachability, youthfulness, and universality. Blue communicates trust, red adds energy, yellow brings optimism, and green signals growth. Together they suggest a company that's both playful and dependable.
Evolution
Google's colors have remained remarkably consistent since 1998, though the specific shades have been refined. The 2015 logo redesign standardized the exact hex values. Material Design (2014) formalized how these colors cascade through UI.
How Google Uses Color
Primary
Google Blue (#4285F4) anchors the search bar, primary buttons, and active states across all Google products.
Secondary
Google Red appears in Gmail, YouTube, and critical notifications — representing both brand recognition and urgency.
Accent
Google Yellow is used sparingly for highlights, starred items, and the second 'o' in the Google logo.
Backgrounds
Clean white backgrounds with subtle gray surfaces (F8F9FA) maintain the airy, content-first aesthetic.
Typography
Near-black (#202124) primary text with two gray levels creates hierarchy without feeling heavy.
Semantic
Google Green (#34A853) powers success states, Drive, Sheets, and Android branding. The semantic colors intentionally mirror the brand palette.
Agent integration
Use Google's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/google/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Google's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Google
Generate a unique color palette inspired by Google's aesthetic using AI.