Tempered Petrol color palette — #D9E8E2 · #00749F · #744A00 · #002F43 · #020100

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

The five colors

• Parchment (#D9E8E2): bright and airy, almost weightless.
• Slate (#00749F): A full-bodied, balanced blue — the color of deep harbor water.
• Bronze (#744A00): A full-bodied, balanced gold — the color of old brass.
• Midnight (#002F43): A deep, shadowed, dusty blue — the color of open sky before noon.
• Black (#020100): quiet, heavy and certain.

Feels like: Trust, Stability, Optimism, Sophistication. Tagged 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

• Powdered Terracotta Lantern color palette (#C8EFE0, #0073A4, #A00A00, #002F46, #040000)
• Midnight Denim Veranda color palette (#D8EBF9, #005976, #553800, #002433, #0B0500)
• Pale Coast color palette (#E8DBE5, #4561C6, #615500, #100088, #020100)
• Wandering Azure color palette (#CFE6FA, #2999DF, #904A00, #005989, #0D0300)
• Hushed Bronze Field color palette (#C1E7EC, #BF6800, #008194, #060A0E, #000201)
• Olive Terrace color palette (#F9ECD0, #657D35, #473B00, #1F0D00, #000200)
• Wandering Ridge color palette (#C2E7FB, #A5AAE3, #BD6AAA, #004C4D, #000106)
• Antique Pier color palette (#DFEEFF, #3987E3, #003F7B, #1D1520, #000511)

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