Netlify color palette
SaaSNetlify's color system is centered around a vibrant teal, complemented by dark backgrounds and neutral grays for a modern, developer-focused UI. The palette supports clarity and accessibility across web and product experiences.
netlify.comNetlify colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Netlify TealPrimary0, 199, 183
- Netlify BlackSecondary26, 26, 26
- Netlify YellowAccent255, 217, 92
Surfaces
Page, cards and dividers.- Netlify Deep GrayBackground24, 24, 27
- Netlify Surface GraySurface35, 39, 47
- Netlify Border GrayBorder45, 55, 72
Text
Three tiers of copy.- Netlify WhiteText247, 250, 252
- Netlify Light GraySecondary text160, 174, 192
- Netlify Muted GrayMuted text113, 128, 150
Semantic
Feedback and state colors.- Netlify Success GreenSuccess39, 211, 162
- Netlify Warning YellowWarning255, 217, 92
- Netlify Error RedError255, 92, 92
- Netlify Info BlueInfo58, 191, 248
Use Netlify's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
netlify-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3ABFF8;
--error: #FF5C5C;
--accent: #FFD95C;
--border: #2D3748;
--primary: #00C7B7;
--success: #27D3A2;
--surface: #23272F;
--warning: #FFD95C;
--secondary: #1A1A1A;
--text-muted: #718096;
--background: #18181B;
--text-primary: #F7FAFC;
--text-secondary: #A0AEC0;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
Netlify background, border and text colors
Netlify runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Netlify Deep GrayBackground
- HEX
- RGB
- HSL
- Netlify Surface GraySurface
- HEX
- RGB
- HSL
- Netlify Border GrayBorder
- HEX
- RGB
- HSL
- Netlify WhiteText
- HEX
- RGB
- HSL
- Netlify Light GraySecondary text
- HEX
- RGB
- HSL
- Netlify Muted GrayMuted text
- HEX
- RGB
- HSL
About Netlify's colors
Netlify's palette is built around a signature teal, contrasted by deep grays and accented with yellow for highlights. The system emphasizes clarity, accessibility, and a modern developer aesthetic.
Primary teal contrasts with dark backgrounds for high visibility.
Accent yellow draws attention to calls-to-action.
Neutral grays support readability and depth.
Psychology
The teal evokes innovation and trust, appealing to a technical audience. Dark backgrounds create a focused, immersive environment for developers.
Evolution
Netlify's color palette has remained consistent since its early branding, maintaining teal as its core identity. Minor adjustments to neutrals and accent colors have improved accessibility and UI clarity.
Where Netlify uses each color
- Primary
Used for logos, primary buttons, and key highlights across the website and dashboard.
- Secondary
Forms the main background for navigation bars and hero sections.
- Accent
Highlights important actions, notifications, and badges.
- Backgrounds
Applied to main app screens and landing page backgrounds.
- Text
TextPrimary is used for main content, TextSecondary for subheadings, and TextMuted for hints or less prominent information.
- Semantic
Success, warning, error, and info colors are used for alerts, status indicators, and feedback messages.
Netlify color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Netlify primary color is #00C7B7. This teal is used for branding and key UI elements.
Netlify Teal (#00C7B7) has an RGB value of 0, 199, 183. For print, its approximate CMYK is 80, 0, 36, 22.
Netlify uses a range of grays such as Netlify Deep Gray (#18181B) for backgrounds and Netlify Light Gray (#A0AEC0) for secondary text. These neutrals create contrast and support accessibility in the UI.
Use Netlify Teal (#00C7B7) for primary actions and branding, with dark grays for backgrounds and surfaces. Accent yellow and semantic colors should highlight status, alerts, or important actions.
The secondary color is Netlify Black, #1A1A1A, and the accent is Netlify Yellow, #FFD95C. Together with the primary they make up the three brand colors at the top of this page.
6 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 Netlify's colors consistently when it generates UI.
Make something in the spirit of Netlify
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.