Tempered Petrol color palette — #EFF7F5 · #E2D3CF · #CFB6B4 · #4F799B · #414A47

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

The five colors

• Ivory (#EFF7F5): bright and airy, almost weightless.
• Silver (#E2D3CF): bright and airy, almost weightless.
• Stone (#CFB6B4): A luminous, dusty orange — the color of toasted spice.
• Slate (#4F799B): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#414A47): quiet, heavy and certain.

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

• Dusty Meadow color palette (#EDF2F9, #D8D7E5, #BEBBCA, #58779D, #272D33)
• Indigo Terrace color palette (#FEF1F6, #EAD5CD, #D6B2AE, #7755AB, #4A3B41)
• Driftwood Alley color palette (#F9F3F7, #E1D8D6, #ADADA1, #97768C, #584F55)
• Softworn Bloom color palette (#DDFAED, #C1A8B8, #997596, #63661C, #404F40)
• Timeworn Navy Drift color palette (#F2ECF2, #BAA1AF, #8D739C, #00366E, #1C0D1D)
• Softworn Olive color palette (#FDF3E8, #B7B281, #617E3B, #6B5062, #534000)
• Aubergine Quarry color palette (#F4ECEE, #DBC6C7, #BA978F, #674180, #3A282E)
• Weathered Delta color palette (#FAF2F9, #E2CBD5, #C599A1, #2C4AC3, #3F2B3C)

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