Tempered Petrol color palette — #ECF3F8 · #D5D6DD · #BBBAC8 · #557A96 · #262D33

A conversation between Slate and Ash, giving this palette its sense of trust and stability.

The five colors

• Ivory (#ECF3F8): bright and airy, almost weightless.
• Silver (#D5D6DD): bright and airy, almost weightless.
• Ash (#BBBAC8): a calm mid-gray that lets other colors speak.
• Slate (#557A96): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Onyx (#262D33): 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

• Pewter Lagoon color palette (#F1F1F8, #DDD2DC, #BAB4C2, #7A5485, #201F2B)
• Muted Cobalt Station color palette (#F0F7F4, #E0D4D1, #C8B8B7, #217DAA, #3E4B46)
• Antique Corridor color palette (#ECF2FF, #B7BDD7, #8B8AA3, #665566, #492E42)
• Aged Navy Archive color palette (#E6EDF4, #94A1B3, #717C92, #003668, #00040E)
• Iris Study color palette (#EAF3FF, #BEE1FF, #8EB5F7, #837CC8, #121F37)
• Muted Boulevard color palette (#DCE5F4, #5370C0, #2A3043, #0F1621, #04060B)
• Muted Ultramarine color palette (#EAF3FF, #CBD4E6, #A2ABC5, #2753B5, #0C1A2E)
• Muted Thicket color palette (#FCECFD, #7F9CD5, #676496, #6C2E47, #16223A)

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