Pinterest color palette
SocialPinterest's color system centers on its iconic red, complemented by a clean, neutral palette for UI clarity and content focus. The brand uses minimal accent colors, emphasizing simplicity and visual consistency.
pinterest.comPinterest colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pinterest RedPrimary189, 8, 28
- Pinterest Secondary RedSecondary230, 0, 35
- Pinterest BlushAccent255, 235, 231
Surfaces
Page, cards and dividers.- Pinterest WhiteBackground255, 255, 255
- Pinterest Light GraySurface245, 245, 245
- Pinterest Border GrayBorder226, 226, 226
Text
Three tiers of copy.- Pinterest BlackText17, 17, 17
- Pinterest GraySecondary text118, 118, 118
- Pinterest Muted GrayMuted text181, 181, 181
Semantic
Feedback and state colors.- Pinterest Success GreenSuccess0, 138, 0
- Pinterest Warning YellowWarning255, 183, 0
- Pinterest Error RedError230, 0, 35
- Pinterest Info BlueInfo0, 91, 140
Use Pinterest's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pinterest-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005B8C;
--error: #E60023;
--accent: #FFEBE7;
--border: #E2E2E2;
--primary: #BD081C;
--success: #008A00;
--surface: #F5F5F5;
--warning: #FFB700;
--secondary: #E60023;
--text-muted: #B5B5B5;
--background: #FFFFFF;
--text-primary: #111111;
--text-secondary: #767676;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Pinterest gray and neutral colors
The quiet part of the Pinterest palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pinterest WhiteBackground
- HEX
- RGB
- HSL
- Pinterest Light GraySurface
- HEX
- RGB
- HSL
- Pinterest Border GrayBorder
- HEX
- RGB
- HSL
- Pinterest BlackText
- HEX
- RGB
- HSL
- Pinterest GraySecondary text
- HEX
- RGB
- HSL
- Pinterest Muted GrayMuted text
- HEX
- RGB
- HSL
About Pinterest's colors
Pinterest's palette is built around a bold, recognizable red, supported by neutral grays and whites for a clean, content-forward interface. The limited use of accent colors ensures the primary red remains the focal point.
Primary red contrasts with white and gray backgrounds.
Accent blush is used sparingly for highlights.
Dark text ensures readability on light surfaces.
Psychology
The red conveys energy, creativity, and action, encouraging user engagement. The neutral tones create a calm, inviting space that puts content first.
Evolution
Pinterest's palette has remained stable, with minor adjustments to red and gray tones for accessibility and digital clarity. The focus has always been on simplicity and minimalism.
Where Pinterest uses each color
- Primary
Pinterest Red is used for the logo, primary buttons, and key highlights in navigation.
- Secondary
Pinterest Secondary Red appears in hover states and some icons.
- Accent
Pinterest Blush is used for subtle backgrounds and notification badges.
- Backgrounds
Pinterest White and Light Gray are used for app backgrounds and card surfaces.
- Text
Pinterest Black and Gray are used for primary and secondary text throughout the UI.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts.
Pinterest color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Pinterest primary color hex code is #BD081C. This is used for the logo and main brand elements.
Pinterest Red (#BD081C) is RGB(189, 8, 28). For CMYK, it is approximately 0, 96, 85, 26.
Pinterest uses #F5F5F5 (Light Gray), #E2E2E2 (Border Gray), #767676 (Gray), and #B5B5B5 (Muted Gray) for UI neutrals. These support content clarity and accessibility.
Use Pinterest Red (#BD081C) for primary actions and branding, with neutrals for backgrounds and surfaces. Accent and semantic colors are reserved for highlights, notifications, and status messaging.
The secondary color is Pinterest Secondary Red, #E60023, and the accent is Pinterest Blush, #FFEBE7. 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 Pinterest's colors consistently when it generates UI.
Make something in the spirit of Pinterest
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
