Patreon color palette
SocialPatreon's color identity is defined by a bold black primary, complemented by a signature coral accent and a range of neutral grays for UI clarity. The palette is minimal, modern, and focused on strong contrast for accessibility.
patreon.comPatreon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Patreon BlackPrimary0, 0, 0
- Patreon CoralSecondary249, 104, 84
- Patreon NavyAccent5, 45, 73
Surfaces
Page, cards and dividers.- Patreon WhiteBackground255, 255, 255
- Patreon Light GraySurface247, 247, 248
- Patreon Border GrayBorder230, 230, 232
Text
Three tiers of copy.- Patreon Text BlackText5, 5, 5
- Patreon Text GraySecondary text109, 109, 109
- Patreon Muted GrayMuted text159, 159, 159
Semantic
Feedback and state colors.- Patreon GreenSuccess43, 198, 106
- Patreon OrangeWarning255, 180, 67
- Patreon RedError229, 73, 55
- Patreon BlueInfo74, 144, 226
Use Patreon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
patreon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #E54937;
--accent: #052D49;
--border: #E6E6E8;
--primary: #000000;
--success: #2BC66A;
--surface: #F7F7F8;
--warning: #FFB443;
--secondary: #F96854;
--text-muted: #9F9F9F;
--background: #FFFFFF;
--text-primary: #050505;
--text-secondary: #6D6D6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
20.4:1
Pass
Text on surface
Needs 4.5:1 for body text
19.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Patreon gray and neutral colors
The quiet part of the Patreon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Patreon WhiteBackground
- HEX
- RGB
- HSL
- Patreon Light GraySurface
- HEX
- RGB
- HSL
- Patreon Border GrayBorder
- HEX
- RGB
- HSL
- Patreon Text BlackText
- HEX
- RGB
- HSL
- Patreon Text GraySecondary text
- HEX
- RGB
- HSL
- Patreon Muted GrayMuted text
- HEX
- RGB
- HSL
About Patreon's colors
Patreon's palette uses high-contrast black and white with a vivid coral accent for emphasis. The minimal use of color supports clarity and accessibility across digital interfaces.
Primary black contrasts with white backgrounds for readability.
Coral accent draws attention to calls to action.
Grays provide structure and hierarchy in UI elements.
Psychology
Black conveys authority and sophistication, while coral adds warmth and approachability. The restrained palette helps creators and content stand out, not the interface.
Evolution
Patreon's palette has remained consistent since its 2017 rebrand, focusing on black, white, and coral. Minor adjustments have been made to gray tones for improved accessibility.
Where Patreon uses each color
- Primary
Used for logo, navigation bars, and primary buttons.
- Secondary
Coral is used for highlights, action buttons, and important icons.
- Accent
Navy appears in illustrations, backgrounds, and select UI elements.
- Backgrounds
White and light gray are used for page and card backgrounds.
- Text
Text black is used for primary content, with gray and muted gray for secondary and disabled text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states in the UI.
Patreon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary color for Patreon is #000000, known as Patreon Black. It is used for the logo and key interface elements.
Patreon Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). This pure black is used for maximum contrast.
Patreon uses several grays: #F7F7F8 (Light Gray), #E6E6E8 (Border Gray), #6D6D6D (Text Gray), and #9F9F9F (Muted Gray). These provide structure and hierarchy in the interface.
Use #000000 for primary actions and branding, #F96854 for accents and highlights, and the gray tones for backgrounds, borders, and secondary text. Always maintain high contrast for accessibility.
The secondary color is Patreon Coral, #F96854, and the accent is Patreon Navy, #052D49. 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 Patreon's colors consistently when it generates UI.
Make something in the spirit of Patreon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.