Copilot color palette
SaaSCopilot's brand color identity centers on a distinctive blue, supported by a modern grayscale palette and subtle accent tones. The system is designed for clarity and professionalism in SaaS interfaces.
copilot.comCopilot colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Copilot BluePrimary0, 87, 255
- Copilot CharcoalSecondary26, 26, 26
- Copilot SkyAccent0, 194, 255
Surfaces
Page, cards and dividers.- Copilot WhiteBackground255, 255, 255
- Copilot SurfaceSurface245, 247, 250
- Copilot Border GrayBorder227, 232, 239
Text
Three tiers of copy.- Copilot CharcoalText26, 26, 26
- Copilot SlateSecondary text75, 85, 99
- Copilot Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Copilot GreenSuccess34, 197, 94
- Copilot OrangeWarning245, 158, 66
- Copilot RedError239, 68, 68
- Copilot Info BlueInfo59, 130, 246
Use Copilot's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
copilot-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #00C2FF;
--border: #E3E8EF;
--primary: #0057FF;
--success: #22C55E;
--surface: #F5F7FA;
--warning: #F59E42;
--secondary: #1A1A1A;
--text-muted: #6B7280;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Copilot background, border and text colors
The quiet part of the Copilot palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Copilot WhiteBackground
- HEX
- RGB
- HSL
- Copilot SurfaceSurface
- HEX
- RGB
- HSL
- Copilot Border GrayBorder
- HEX
- RGB
- HSL
- Copilot CharcoalText
- HEX
- RGB
- HSL
- Copilot SlateSecondary text
- HEX
- RGB
- HSL
- Copilot Muted GrayMuted text
- HEX
- RGB
- HSL
About Copilot's colors
Copilot's palette is anchored by a vivid blue, balanced by neutral grays and white for a crisp, modern interface. Accent and semantic colors are used sparingly for clarity and accessibility.
Primary blue contrasts with white backgrounds for legibility.
Grayscale tones provide visual hierarchy and depth.
Accent blue highlights interactive elements.
Psychology
Blue conveys trust, reliability, and a sense of calm, aligning with SaaS expectations. The restrained use of color supports a professional, focused user experience.
Evolution
Copilot's palette has remained consistent, with minor adjustments to blue and gray tones for improved accessibility. The color system has evolved to support more semantic roles as the product matured.
Where Copilot uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the app.
- Secondary
Applied to headers, footers, and background elements for contrast.
- Accent
Highlights links, active states, and call-to-action elements.
- Backgrounds
White and light gray backgrounds are standard for app screens and dashboards.
- Text
Charcoal and slate grays are used for primary and secondary text throughout the UI.
- Semantic
Green, orange, and red are reserved for success, warning, and error states in notifications and forms.
Copilot color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Copilot brand blue is #0057FF. This color is used for primary actions and navigation.
Copilot Blue (#0057FF) in RGB is (0, 87, 255). For CMYK, it is approximately (100, 66, 0, 0).
Copilot uses a range of grays including Copilot Charcoal (#1A1A1A), Copilot Slate (#4B5563), and Copilot Muted Gray (#6B7280) for UI backgrounds and text. These provide depth and hierarchy in the interface.
Use Copilot Blue (#0057FF) for primary actions and navigation, with accent blue and semantic colors for highlights and statuses. Grays and whites should structure backgrounds and text for clarity and accessibility.
The secondary color is Copilot Charcoal, #1A1A1A, and the accent is Copilot Sky, #00C2FF. 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 Copilot's colors consistently when it generates UI.
Make something in the spirit of Copilot
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.