Substack color palette
SocialSubstack's color identity is defined by its signature orange, paired with a minimalistic palette of neutrals and dark tones for clarity and readability. The brand uses a restrained color system that emphasizes content and accessibility.
substack.comSubstack colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Substack OrangePrimary255, 103, 25
- Substack CharcoalSecondary38, 38, 38
- Substack PeachAccent255, 184, 140
Surfaces
Page, cards and dividers.- Substack WhiteBackground255, 255, 255
- Substack Light GraySurface247, 247, 247
- Substack Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Substack BlackText24, 24, 24
- Substack Medium GraySecondary text107, 107, 107
- Substack Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Substack Success GreenSuccess43, 182, 115
- Substack Warning YellowWarning255, 180, 0
- Substack Error RedError224, 60, 49
- Substack Info BlueInfo51, 142, 218
Use Substack's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
substack-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #338EDA;
--error: #E03C31;
--accent: #FFB88C;
--border: #E6E6E6;
--primary: #FF6719;
--success: #2BB673;
--surface: #F7F7F7;
--warning: #FFB400;
--secondary: #262626;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #181818;
--text-secondary: #6B6B6B;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
16.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.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.4:1
Fail
Substack gray and neutral colors
The quiet part of the Substack palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Substack WhiteBackground
- HEX
- RGB
- HSL
- Substack Light GraySurface
- HEX
- RGB
- HSL
- Substack Border GrayBorder
- HEX
- RGB
- HSL
- Substack BlackText
- HEX
- RGB
- HSL
- Substack Medium GraySecondary text
- HEX
- RGB
- HSL
- Substack Muted GrayMuted text
- HEX
- RGB
- HSL
About Substack's colors
Substack's palette centers on a bold orange for brand recognition, complemented by neutral grays and whites for a clean, content-focused interface. Minimal accent colors are used to maintain clarity and hierarchy.
Orange contrasts with deep charcoal for emphasis.
Neutrals provide a calm background for content.
Accent peach highlights subtle UI elements.
Psychology
The orange conveys energy, creativity, and approachability, encouraging engagement. The neutral tones foster trust and readability, supporting Substack's focus on written content.
Evolution
Substack's palette has remained consistent since launch, with orange always as the anchor. Minor adjustments to gray tones have improved accessibility and visual balance over time.
Where Substack uses each color
- Primary
Used for the logo, primary buttons, and key calls to action.
- Secondary
Appears in navigation bars, footers, and some headings.
- Accent
Highlights subtle UI elements like tags or notification dots.
- Backgrounds
White and light gray backgrounds are used for content areas and cards.
- Text
Black and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status messages, alerts, and notifications.
Substack color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Substack primary color is #FF6719, known as Substack Orange.
Substack Orange (#FF6719) is RGB(255, 103, 25) and CMYK(0, 60, 90, 0).
Substack uses #262626 (Substack Charcoal), #6B6B6B (Medium Gray), and #A3A3A3 (Muted Gray) for dark and neutral UI elements.
Use #FF6719 for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights and status indicators.
The secondary color is Substack Charcoal, #262626, and the accent is Substack Peach, #FFB88C. 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 Substack's colors consistently when it generates UI.
Make something in the spirit of Substack
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.