Tempered Petrol color palette — #EFF6FA · #D7DBE7 · #BDBFD2 · #31818E · #41494D

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

The five colors

• Ivory (#EFF6FA): a clean, paper-quiet neutral.
• Silver (#D7DBE7): bright and airy, almost weightless.
• Ash (#BDBFD2): A luminous, dusty violet — the color of wild irises.
• Slate (#31818E): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal (#41494D): a grounded near-black with real depth.

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 Veranda color palette (#EAF4F7, #D5D9E7, #C0BBCE, #3D8185, #222E32)
• Worn Driftwood Lagoon color palette (#F0F7F1, #CFE0E1, #D8C3C6, #7A987D, #424A43)
• Patina Alley color palette (#F3F5FB, #DED6E2, #B4B0C3, #605B96, #373A44)
• Antique Station color palette (#D4E2E9, #9AACBB, #6B80A3, #003E4E, #011622)
• Driftwood Quarry color palette (#EBF7FF, #A2B5CD, #8482B2, #765568, #425745)
• Patina Pine Market color palette (#EDF8F4, #98BA94, #29865D, #30626D, #304844)
• Feathered Sky Garden color palette (#ECF7FF, #7DEEEE, #5FC7FF, #7689D4, #264156)
• Pewter Parlor color palette (#EBF7FF, #3595B5, #764E96, #782C1D, #104133)

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