Stack Overflow color palette
SocialStack Overflow's color system is defined by its signature orange and a range of neutral grays, supporting a clear, accessible interface for developers. The palette emphasizes clarity, contrast, and a professional yet approachable tone.
stackoverflow.comStack Overflow colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Stack Overflow OrangePrimary245, 128, 37
- Stack Overflow BlueSecondary0, 149, 255
- Stack Overflow YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Stack Overflow Light GrayBackground246, 246, 246
- Stack Overflow WhiteSurface255, 255, 255
- Stack Overflow Border GrayBorder228, 230, 232
Text
Three tiers of copy.- Stack Overflow CharcoalText35, 38, 41
- Stack Overflow Secondary GraySecondary text106, 115, 124
- Stack Overflow Muted GrayMuted text159, 166, 173
Semantic
Feedback and state colors.- Stack Overflow GreenSuccess47, 111, 68
- Stack Overflow Warning OrangeWarning227, 98, 9
- Stack Overflow RedError208, 57, 62
- Stack Overflow Info BlueInfo0, 119, 204
Use Stack Overflow's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
stack-overflow-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077CC;
--error: #D0393E;
--accent: #FFD100;
--border: #E4E6E8;
--primary: #F58025;
--success: #2F6F44;
--surface: #FFFFFF;
--warning: #E36209;
--secondary: #0095FF;
--text-muted: #9FA6AD;
--background: #F6F6F6;
--text-primary: #232629;
--text-secondary: #6A737C;
}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.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Stack Overflow gray and neutral colors
The quiet part of the Stack Overflow palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Stack Overflow Light GrayBackground
- HEX
- RGB
- HSL
- Stack Overflow WhiteSurface
- HEX
- RGB
- HSL
- Stack Overflow Border GrayBorder
- HEX
- RGB
- HSL
- Stack Overflow CharcoalText
- HEX
- RGB
- HSL
- Stack Overflow Secondary GraySecondary text
- HEX
- RGB
- HSL
- Stack Overflow Muted GrayMuted text
- HEX
- RGB
- HSL
About Stack Overflow's colors
Stack Overflow's palette is anchored by a vibrant orange, complemented by blues and a spectrum of neutral grays. The system is designed for high contrast and usability in digital interfaces.
Orange and blue provide complementary contrast.
Neutral grays support readability and focus.
Accent yellow highlights key actions.
Psychology
The orange conveys energy and approachability, while the blues and grays communicate trust and professionalism. This balance appeals to a global developer audience seeking clarity and reliability.
Evolution
The palette has remained stable since Stack Overflow's inception, with minor adjustments to gray tones for improved accessibility. The core orange and blue have been consistent brand identifiers.
Where Stack Overflow uses each color
- Primary
Used for the logo, primary buttons, and key highlights across the site.
- Secondary
Appears in links, secondary buttons, and informational elements.
- Accent
Used for badges, highlights, and subtle UI cues.
- Backgrounds
Light gray and white are used for main backgrounds and content areas.
- Text
Charcoal and secondary gray are used for primary and secondary text, with muted gray for less prominent information.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational messages respectively.
Stack Overflow color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Stack Overflow primary color is #F58025. This orange is used for the logo and primary actions.
Stack Overflow Orange (#F58025) has an RGB value of 245, 128, 37. In CMYK, it is approximately 0, 48, 85, 4.
Stack Overflow uses several grays: #F6F6F6 for backgrounds, #E4E6E8 for borders, #232629 for primary text, and #6A737C for secondary text. These neutrals ensure readability and a clean interface.
Use the primary orange (#F58025) for main actions and branding, with blue (#0095FF) for links and secondary actions. Grays should be used for backgrounds, borders, and text to maintain clarity and contrast.
The secondary color is Stack Overflow Blue, #0095FF, and the accent is Stack Overflow Yellow, #FFD100. Together with the primary they make up the three brand colors at the top of this page.
3 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 Stack Overflow's colors consistently when it generates UI.
Make something in the spirit of Stack Overflow
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.