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 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Google BluePrimary66, 133, 244
- Google RedSecondary234, 67, 53
- Google YellowAccent251, 188, 4
Surfaces
Page, cards and dividers.- Google WhiteBackground255, 255, 255
- Google SurfaceSurface248, 249, 250
- Google BorderBorder218, 220, 224
Text
Three tiers of copy.- Google TextText32, 33, 36
- Google SecondarySecondary text95, 99, 104
- Google MutedMuted text154, 160, 166
Semantic
Feedback and state colors.- Google GreenSuccess52, 168, 83
- Google AmberWarning251, 188, 4
- Google Error RedError234, 67, 53
- Google Info BlueInfo66, 133, 244
Use Google's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
google-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4285F4;
--error: #EA4335;
--accent: #FBBC04;
--border: #DADCE0;
--primary: #4285F4;
--success: #34A853;
--surface: #F8F9FA;
--warning: #FBBC04;
--secondary: #EA4335;
--text-muted: #9AA0A6;
--background: #FFFFFF;
--text-primary: #202124;
--text-secondary: #5F6368;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Google background, border and text colors
The quiet part of the Google palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Google WhiteBackground
- HEX
- RGB
- HSL
- Google SurfaceSurface
- HEX
- RGB
- HSL
- Google BorderBorder
- HEX
- RGB
- HSL
- Google TextText
- HEX
- RGB
- HSL
- Google SecondarySecondary text
- HEX
- RGB
- HSL
- Google MutedMuted text
- HEX
- RGB
- HSL
About Google's colors
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
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.
Where Google uses each 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.
- Text
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.
Google color questions
Hex codes, RGB values, neutrals and how to use the palette.
Google's four brand colors are Blue (#4285F4), Red (#EA4335), Yellow (#FBBC04), and Green (#34A853). These are the official values used across all Google products and marketing materials.
Google's four-color palette reflects the company's belief in making information accessible and enjoyable. The primary colors evoke simplicity and universality, suggesting that Google's products are for everyone.
Material Design extends Google's brand colors into a comprehensive system with tonal palettes, elevation-based shading, and dynamic color (Material You). Each primary color has 10 tonal variations from 50 to 900.
The secondary color is Google Red, #EA4335, and the accent is Google Yellow, #FBBC04. Together with the primary they make up the three brand colors at the top of this page.
Google uses #FFFFFF for backgrounds, #F8F9FA for surfaces and #DADCE0 for borders. Text runs #202124, #5F6368 and #9AA0A6 from strongest to most muted.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Google's colors consistently when it generates UI.
Make something in the spirit of Google
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.