Tempered Petrol color palette — #FDF2F5 · #B495CF · #339D95 · #0A779C · #3C2C37
Slate takes the lead with Fern close behind in a set that reads as trust and stability at first glance.
The five colors
- Ivory (#FDF2F5): bright and airy, almost weightless.
- Mauve (#B495CF): A luminous, balanced violet — the color of a velvet chair.
- Fern (#339D95): A luminous, balanced teal — the color of glacier melt.
- Slate (#0A779C): A full-bodied, balanced blue — the color of deep harbor water.
- Espresso (#3C2C37): A deep, shadowed, dusty pink — the color of a candy shop window.
Feels like: Trust, Stability, Creativity, Sophistication. Tagged jewel, vibrant, muted.
Use it as a design system
One click turns Tempered Petrol into a complete token system: semantic roles from primary to success, an 11-stop OKLCH scale per role, a WCAG AA/AAA and APCA contrast matrix, an auto-derived dark mode and 11 export formats including CSS custom properties, Tailwind, Figma Variables and shadcn/ui.
Similar palettes
- Aged Petrol Ridge color palette (#FDF2F0, #C8859B, #498BB3, #5E63A5, #422B2F)
- Wandering Bloom color palette (#FBF2FB, #88A7D5, #71985D, #007E6E, #24352D)
- Magenta Canyon color palette (#FFF1F3, #D260CE, #007F89, #005C97, #281E41)
- Wandering Delta color palette (#FCF1FD, #FF9A9E, #62B7B7, #5B9B9C, #303442)
- Cypress Field color palette (#F9F5EA, #BAB37E, #6E9874, #007879, #1E4662)
- Nightshade Quarry color palette (#FFF2F0, #C6658A, #00709D, #3E47AA, #34151C)
- Antique Pine color palette (#FEF2F0, #B46F85, #337D37, #164F79, #43302E)
- Hushed Blush Alley color palette (#FBF2FA, #FF999D, #A69042, #6C5E84, #2C2632)
Browse the whole catalog at Explore, or see today's palette.