Tempered Petrol color palette — #E7F6EF · #7BBDDD · #C9897F · #2D7B9C · #362F2C

Built around Slate, softened by Sky — the whole palette hums with trust and stability.

The five colors

• Cream (#E7F6EF): bright and airy, almost weightless.
• Sky (#7BBDDD): A luminous, balanced blue — the color of open sky before noon.
• Dusty Rose (#C9897F): A luminous, balanced orange — the color of sun-warmed clay.
• Slate (#2D7B9C): A full-bodied, balanced blue — the color of deep harbor water.
• Espresso (#362F2C): a grounded near-black with real depth.

Feels like: Trust, Stability, 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

• Muted Petrol Bloom color palette (#EAFAF0, #7DBACE, #C6886A, #007F9B, #524C47)
• Tempered Cobalt color palette (#FCECF8, #A1B0E9, #B49865, #5E6CAF, #34302A)
• Cypress Market color palette (#EEF4EA, #7DC3B1, #BD8BA4, #23836F, #462727)
• Tempered Cerulean color palette (#E9F8FF, #8DD1E0, #E1A080, #009DB5, #624154)
• Patina Amber color palette (#E2F9E9, #5FA9B8, #B48152, #95704D, #1A2C21)
• Timeworn Villa color palette (#F7EFF6, #D7BF9E, #4D6189, #3C2A3A, #191118)
• Antique Boulevard color palette (#DAFBEF, #A6D9F9, #5092B0, #16516B, #00271D)
• Ancient Stone Market color palette (#E8F6EC, #F0D3D0, #E6B8AB, #7E8F6F, #273E37)

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