Tempered Petrol color palette — #EFF7F4 · #DED4D3 · #CAB7B9 · #507A96 · #3D4C46

Slate and Stone set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#EFF7F4): a clean, paper-quiet neutral.
• Silver (#DED4D3): a clean, paper-quiet neutral.
• Stone (#CAB7B9): A luminous, dusty red — the color of embers at dusk.
• Slate (#507A96): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal (#3D4C46): A full-bodied, dusty teal — the color of glacier melt.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

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

• Softworn Petrol color palette (#EDF4F0, #DCD1CE, #CCB4B1, #2C7EA3, #232F2A)
• Indigo Alley color palette (#FCF2F6, #E6D5D1, #D5B2B5, #7058AE, #4C3A42)
• Navy Atelier color palette (#DEE8E5, #B4A3B0, #907784, #003966, #031814)
• Wandering Chestnut color palette (#FEF0FF, #C9AABB, #A27A83, #855B1B, #435611)
• Tempered Basalt Cabin color palette (#FBF4EA, #B8B182, #6F794C, #406350, #533F00)
• Hushed Coast color palette (#F5ECEF, #D6C8CA, #B49998, #624580, #39282E)
• Timeworn Cobalt Atelier color palette (#EFDFEC, #506CBB, #432937, #261B24, #091213)
• Muted Pier color palette (#FFF4E2, #689DCC, #666297, #723F13, #4A3549)

Browse the whole catalog at Explore, or see today's palette.