Pinterest Color Psychology & Meaning
Pinterest red is discovery energy — the excitement of finding something you didn't know you were looking for. It's warm enough to feel personal, bold enough to command attention.
#FFFFFF
#E60023
#111111
#767676
Background
Primary Accent
Secondary
Body Text
boldwarmminimal springsummer appbrandingweb
AA
WCAG Grade
4.5:1
Contrast Ratio
3,100
Saves
8,100
AI Copies
Use #FFFFFF as the background. Use #E60023 as the primary accent. Use #111111 as secondary. Use #767676 as body text/supporting color. Palette mood: Pinterest — bold, warm, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Pinterest color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 16.9% | 230, 0, 35 | 0%, 100%, 85%, 10% | 351°, 100%, 45% | ||
| Secondary Luminance: 0.6% | 17, 17, 17 | 0%, 0%, 0%, 93% | 0°, 0%, 7% | ||
| Body Text Luminance: 18.1% | 118, 118, 118 | 0%, 0%, 0%, 54% | 0°, 0%, 46% |
Color Harmony: Triadic Scheme
The Pinterest palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Pinterest launched 2010. The red was chosen to signal passion and inspiration — the core emotional proposition of the platform.
Best Design Use Cases
Red for pins, save buttons, and primary brand moments. White for the endless scroll surface. Dark for text.
Industries This Palette Suits
Social media, inspiration, e-commerce, lifestyle.
How to Implement the Pinterest Color Scheme
To use this Pinterest color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #E60023 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #767676 and #FFFFFF is 4.54:1 (AA). Ensure your body text remains legible.