Nest color palette
ConsumerNest's color identity centers on a distinctive blue, paired with soft neutrals and subtle accent colors for a clean, modern look. The palette is designed to evoke trust, simplicity, and approachability in smart home technology.
nest.comNest colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nest BluePrimary0, 175, 250
- Nest Light BlueSecondary166, 216, 247
- Nest CoralAccent255, 138, 101
Surfaces
Page, cards and dividers.- Nest CloudBackground245, 247, 250
- Nest WhiteSurface255, 255, 255
- Nest Border GrayBorder224, 228, 234
Text
Three tiers of copy.- Nest CharcoalText33, 39, 42
- Nest SlateSecondary text95, 99, 104
- Nest GrayMuted text154, 160, 166
Semantic
Feedback and state colors.- Nest Success GreenSuccess52, 199, 89
- Nest Warning OrangeWarning255, 167, 38
- Nest Error RedError234, 67, 53
- Nest Info BlueInfo66, 133, 244
Use Nest's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nest-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4285F4;
--error: #EA4335;
--accent: #FF8A65;
--border: #E0E4EA;
--primary: #00AFFA;
--success: #34C759;
--surface: #FFFFFF;
--warning: #FFA726;
--secondary: #A6D8F7;
--text-muted: #9AA0A6;
--background: #F5F7FA;
--text-primary: #21272A;
--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
14.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Nest background, border and text colors
The quiet part of the Nest palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nest CloudBackground
- HEX
- RGB
- HSL
- Nest WhiteSurface
- HEX
- RGB
- HSL
- Nest Border GrayBorder
- HEX
- RGB
- HSL
- Nest CharcoalText
- HEX
- RGB
- HSL
- Nest SlateSecondary text
- HEX
- RGB
- HSL
- Nest GrayMuted text
- HEX
- RGB
- HSL
About Nest's colors
Nest's palette is built around a calming blue, supported by light neutrals and soft accent hues. The colors are chosen for clarity, readability, and a sense of technological warmth.
Primary blue is complemented by light blue and coral for visual interest.
Neutrals provide a clean backdrop for product imagery and UI.
Accent colors are used sparingly for calls to action and alerts.
Psychology
Blue conveys trust, reliability, and calm, aligning with Nest's smart home positioning. Soft neutrals and accents make the brand feel friendly and approachable.
Evolution
Nest's core blue has remained consistent since its launch, with minor tweaks to supporting colors for digital clarity. The palette has expanded to include more nuanced grays and accent tones for modern UI needs.
Where Nest uses each color
- Primary
Nest Blue is used for navigation bars, primary buttons, and key brand elements.
- Secondary
Nest Light Blue appears in backgrounds, highlights, and secondary buttons.
- Accent
Nest Coral is used for notifications, CTAs, and select icons.
- Backgrounds
Nest Cloud and Nest White are used for app screens, website backgrounds, and packaging.
- Text
Nest Charcoal and Nest Slate are used for headings and body text, while Nest Gray is for muted or disabled text.
- Semantic
Success, warning, error, and info colors are used for status indicators and alerts in the UI.
Nest color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nest brand color is Nest Blue, with the hex code #00AFFA.
Nest Blue is RGB(0, 175, 250) and in CMYK it is approximately 80, 10, 0, 2.
Nest uses several neutrals including Nest Cloud (#F5F7FA), Nest Border Gray (#E0E4EA), and Nest Gray (#9AA0A6) for backgrounds, borders, and muted text.
Use Nest Blue for primary actions and branding, neutrals for backgrounds, and accent colors sparingly for emphasis. Always maintain sufficient contrast for accessibility.
The secondary color is Nest Light Blue, #A6D8F7, and the accent is Nest Coral, #FF8A65. 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 Nest's colors consistently when it generates UI.
Make something in the spirit of Nest
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.