ChatGPT color palette
SaaSChatGPT's brand identity is built around a distinctive green, paired with dark backgrounds and muted neutrals for a modern, technical look. The palette emphasizes clarity, accessibility, and a sense of intelligence.
chat.openai.comChatGPT colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- ChatGPT GreenPrimary16, 163, 127
- ChatGPT CharcoalSecondary32, 33, 35
- ChatGPT MintAccent54, 201, 167
Surfaces
Page, cards and dividers.- ChatGPT Dark SurfaceBackground52, 53, 65
- ChatGPT Panel GraySurface68, 70, 84
- ChatGPT Border GrayBorder62, 63, 75
Text
Three tiers of copy.- ChatGPT Light TextText236, 236, 241
- ChatGPT Muted TextSecondary text197, 197, 210
- ChatGPT Subtle TextMuted text142, 142, 160
Semantic
Feedback and state colors.- ChatGPT Success GreenSuccess33, 163, 102
- ChatGPT Warning OrangeWarning235, 161, 58
- ChatGPT Error RedError217, 58, 73
- ChatGPT Info BlueInfo58, 139, 205
Use ChatGPT's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chatgpt-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8BCD;
--error: #D93A49;
--accent: #36C9A7;
--border: #3E3F4B;
--primary: #10A37F;
--success: #21A366;
--surface: #444654;
--warning: #EBA13A;
--secondary: #202123;
--text-muted: #8E8EA0;
--background: #343541;
--text-primary: #ECECF1;
--text-secondary: #C5C5D2;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
10.3:1
Pass
Text on surface
Needs 4.5:1 for body text
7.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.8:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
ChatGPT gray, dark and neutral colors
ChatGPT 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.
- ChatGPT Dark SurfaceBackground
- HEX
- RGB
- HSL
- ChatGPT Panel GraySurface
- HEX
- RGB
- HSL
- ChatGPT Border GrayBorder
- HEX
- RGB
- HSL
- ChatGPT Light TextText
- HEX
- RGB
- HSL
- ChatGPT Muted TextSecondary text
- HEX
- RGB
- HSL
- ChatGPT Subtle TextMuted text
- HEX
- RGB
- HSL
About ChatGPT's colors
ChatGPT's palette centers on a signature green, supported by a range of dark and muted tones for contrast and readability. The color system is designed for accessibility and a modern, technical feel.
Primary green contrasts with dark backgrounds for focus.
Muted neutrals support clarity and hierarchy.
Accent mint provides visual highlights.
Psychology
Green conveys intelligence, trust, and approachability, aligning with ChatGPT's AI-driven brand. The dark neutrals evoke professionalism and focus.
Evolution
The palette has remained stable since launch, with green and dark neutrals consistently used in the UI. Minor adjustments have improved accessibility and contrast.
Where ChatGPT uses each color
- Primary
Used for logo, primary buttons, and key highlights in the interface.
- Secondary
Forms the main navigation and sidebar backgrounds.
- Accent
Applied to active states, links, and subtle highlights.
- Backgrounds
Dark surfaces are used for app screens and chat backgrounds.
- Text
Light and muted text colors are used for primary and secondary content.
- Semantic
Success, warning, error, and info colors are used for system messages and alerts.
ChatGPT color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official ChatGPT brand color is ChatGPT Green, hex code #10A37F.
ChatGPT Green (#10A37F) is RGB(16, 163, 127). For CMYK, use approximately 90, 0, 45, 36.
ChatGPT uses dark neutrals like ChatGPT Charcoal (#202123), Panel Gray (#444654), and Border Gray (#3E3F4B) for backgrounds and surfaces.
Use ChatGPT Green (#10A37F) for primary actions and highlights, with dark backgrounds and light text for contrast. Semantic colors are reserved for status and alerts.
The secondary color is ChatGPT Charcoal, #202123, and the accent is ChatGPT Mint, #36C9A7. Together with the primary they make up the three brand colors at the top of this page.
5 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 ChatGPT's colors consistently when it generates UI.
Make something in the spirit of ChatGPT
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.