Google Flights color palette
TravelGoogle Flights uses a clean, minimal color palette consistent with Google's Material Design, featuring blue as the primary brand color and neutral grays for UI clarity. The palette emphasizes usability and aligns with Google's broader brand identity.
google.comGoogle Flights 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, 5
Surfaces
Page, cards and dividers.- Flights WhiteBackground255, 255, 255
- Flights Light GraySurface248, 249, 250
- Flights Divider GrayBorder224, 224, 224
Text
Three tiers of copy.- Flights Text BlackText32, 33, 36
- Flights Text GraySecondary text95, 99, 104
- Flights Muted GrayMuted text154, 160, 166
Semantic
Feedback and state colors.- Google GreenSuccess52, 168, 83
- Flights OrangeWarning242, 153, 0
- Google RedError234, 67, 53
- Google BlueInfo66, 133, 244
Use Google Flights's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
google-flights-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4285F4;
--error: #EA4335;
--accent: #FBBC05;
--border: #E0E0E0;
--primary: #4285F4;
--success: #34A853;
--surface: #F8F9FA;
--warning: #F29900;
--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 Flights background, border and text colors
The quiet part of the Google Flights palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Flights WhiteBackground
- HEX
- RGB
- HSL
- Flights Light GraySurface
- HEX
- RGB
- HSL
- Flights Divider GrayBorder
- HEX
- RGB
- HSL
- Flights Text BlackText
- HEX
- RGB
- HSL
- Flights Text GraySecondary text
- HEX
- RGB
- HSL
- Flights Muted GrayMuted text
- HEX
- RGB
- HSL
About Google Flights's colors
Google Flights' palette is rooted in Material Design, using blue for trust and clarity, with supporting colors from the Google brand spectrum. Neutrals are used for backgrounds and surfaces to maintain focus on content.
Primary blue is complemented by red, yellow, and green accents.
Neutral grays provide structure and hierarchy.
Semantic colors (green, orange, red) signal status and feedback.
Psychology
Blue conveys reliability and calm, supporting the user's travel planning experience. The use of Google's signature colors reinforces brand recognition and trust.
Evolution
The palette has remained stable, mirroring Google's overall brand and Material Design system. Minor adjustments have been made to gray tones for improved accessibility and clarity.
Where Google Flights uses each color
- Primary
Google Blue is used for the main navigation bar, active states, and primary action buttons.
- Secondary
Google Red appears in icons, highlights, and error states.
- Accent
Google Yellow is used for accent highlights and some interactive elements.
- Backgrounds
Flights White and Flights Light Gray are used for backgrounds and card surfaces.
- Text
Flights Text Black and Flights Text Gray are used for primary and secondary text throughout the UI.
- Semantic
Google Green, Flights Orange, and Google Red are used for success, warning, and error messages or indicators.
Google Flights color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Google Flights brand color is Google Blue, with the hex code #4285F4.
Google Blue (#4285F4) in RGB is (66, 133, 244) and in CMYK is (73, 43, 0, 0).
Google Flights uses Flights Light Gray (#F8F9FA), Flights Divider Gray (#E0E0E0), Flights Text Gray (#5F6368), and Flights Muted Gray (#9AA0A6) for backgrounds, borders, and muted text.
Use Google Blue (#4285F4) for primary actions and navigation, with supporting colors for accents and semantic feedback. Neutrals structure the UI and maintain clarity, while semantic colors highlight statuses.
The secondary color is Google Red, #EA4335, and the accent is Google Yellow, #FBBC05. Together with the primary they make up the three brand colors at the top of this page.
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 Flights's colors consistently when it generates UI.
Make something in the spirit of Google Flights
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.