Gemini color palette
SaaSGemini's brand color system is built around a distinctive blue, complemented by deep neutrals and crisp whites for clarity and trust. The palette is designed for fintech and SaaS contexts, ensuring professionalism and digital-first usability.
gemini.comGemini colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Gemini BluePrimary42, 90, 218
- Gemini CyanSecondary0, 220, 250
- Gemini Accent BlueAccent0, 178, 255
Surfaces
Page, cards and dividers.- Gemini WhiteBackground255, 255, 255
- Gemini Light GraySurface245, 247, 250
- Gemini Border GrayBorder225, 230, 235
Text
Three tiers of copy.- Gemini Primary TextText26, 34, 51
- Gemini Secondary TextSecondary text107, 122, 144
- Gemini Muted TextMuted text164, 177, 194
Semantic
Feedback and state colors.- Gemini Success GreenSuccess0, 196, 140
- Gemini Warning YellowWarning255, 184, 0
- Gemini Error RedError255, 77, 79
- Gemini Info BlueInfo42, 90, 218
Use Gemini's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
gemini-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2A5ADA;
--error: #FF4D4F;
--accent: #00B2FF;
--border: #E1E6EB;
--primary: #2A5ADA;
--success: #00C48C;
--surface: #F5F7FA;
--warning: #FFB800;
--secondary: #00DCFA;
--text-muted: #A4B1C2;
--background: #FFFFFF;
--text-primary: #1A2233;
--text-secondary: #6B7A90;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Gemini background, border and text colors
The quiet part of the Gemini palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Gemini WhiteBackground
- HEX
- RGB
- HSL
- Gemini Light GraySurface
- HEX
- RGB
- HSL
- Gemini Border GrayBorder
- HEX
- RGB
- HSL
- Gemini Primary TextText
- HEX
- RGB
- HSL
- Gemini Secondary TextSecondary text
- HEX
- RGB
- HSL
- Gemini Muted TextMuted text
- HEX
- RGB
- HSL
About Gemini's colors
Gemini's palette is anchored by a strong blue, symbolizing trust and security, with supporting neutrals for clarity. Accent colors are used sparingly to guide attention and indicate status.
Primary blue contrasts with white backgrounds for legibility.
Cyan and accent blue provide visual hierarchy for actions.
Grays unify UI surfaces and text for a clean, modern look.
Psychology
Blue is associated with reliability and professionalism, key for fintech and SaaS brands. The supporting palette reinforces clarity, approachability, and trust.
Evolution
Gemini's palette has remained consistent since launch, with minor adjustments to blue and gray tones for improved accessibility. The brand has maintained its blue-centric identity throughout.
Where Gemini uses each color
- Primary
Gemini Blue is used for navigation bars, primary buttons, and key highlights.
- Secondary
Gemini Cyan appears in secondary buttons, links, and active states.
- Accent
Gemini Accent Blue is used for call-to-action elements and interactive highlights.
- Backgrounds
Gemini White and Light Gray are used for app backgrounds and cards.
- Text
Primary and secondary text colors are used throughout the UI for headings and body copy.
- Semantic
Success, warning, and error colors are used for alerts, notifications, and status indicators.
Gemini color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Gemini brand color is Gemini Blue, hex code #2A5ADA.
Gemini Blue (#2A5ADA) in RGB is (42, 90, 218), and in CMYK is (81, 59, 0, 15).
Gemini uses Light Gray (#F5F7FA), Border Gray (#E1E6EB), and several text grays like #6B7A90 and #A4B1C2 for backgrounds, surfaces, and typography.
Use Gemini Blue for primary actions and navigation, with accent and semantic colors for status and highlights. Neutrals should dominate backgrounds and surfaces for clarity and accessibility.
The secondary color is Gemini Cyan, #00DCFA, and the accent is Gemini Accent Blue, #00B2FF. Together with the primary they make up the three brand colors at the top of this page.
2 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 Gemini's colors consistently when it generates UI.
Make something in the spirit of Gemini
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.