Tempered Petrol color palette — #E5F7EF · #75BDE5 · #D08956 · #107BA8 · #36302B

A conversation between Cerulean and Mustard, giving this palette its sense of trust and stability.

The five colors

• Cream (#E5F7EF): A whisper-light, dusty teal — the color of sea glass.
• Sky (#75BDE5): A luminous, balanced blue — the color of deep harbor water.
• Mustard (#D08956): A luminous, balanced gold — the color of afternoon light on wheat.
• Cerulean (#107BA8): A full-bodied, balanced blue — the color of open sky before noon.
• Espresso (#36302B): a grounded near-black with real depth.

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

• Coral Atelier color palette (#EBF5EC, #73C2C8, #D77F80, #008189, #46281E)
• Weathered Sky Veranda color palette (#ECF7FF, #62BAEF, #C38969, #43799B, #5E4452)
• Hushed Taupe Archive color palette (#FBEDF5, #AAADEA, #B29B3C, #6869AD, #34312A)
• Dusty Station color palette (#E6F6F0, #EFD3CD, #AA9B8F, #59919D, #443746)
• Weathered Peony color palette (#E0F8F0, #66A3CF, #C86C89, #718048, #182C26)
• Ultramarine Atelier color palette (#FFEAFF, #4F99F9, #A97900, #0058B3, #2D1D00)
• Azure Lantern color palette (#EAFAF2, #CEDFFE, #FFBB88, #46A6D1, #4B4540)
• Muted Veranda color palette (#F9EEF5, #D6C194, #555D8F, #41273A, #181116)

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