Tempered Petrol color palette — #F0F7F2 · #CFDFDF · #ADC6CA · #3D7F8A · #434A45

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

The five colors

• Ivory (#F0F7F2): bright and airy, almost weightless.
• Silver (#CFDFDF): bright and airy, almost weightless.
• Stone (#ADC6CA): A luminous, dusty blue — the color of deep harbor water.
• Slate (#3D7F8A): A full-bodied, dusty blue — the color of open sky before noon.
• Charcoal (#434A45): quiet, heavy and certain.

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

• Olive Courtyard color palette (#F3F6EF, #D1E0D9, #AEC7C1, #687E3C, #464941)
• Lagoon Veranda color palette (#EEF8F4, #E0D4D1, #A79E93, #608D7F, #4E5452)
• Aged Petrol color palette (#EDF4EE, #CDDCDC, #CBBCBF, #29838D, #272E29)
• Ancient Veranda color palette (#FCF1FA, #E9D3D5, #D5B1BE, #4567B1, #483B46)
• Timeworn Denim Orchard color palette (#E8FAF2, #DFCBE2, #98A5CE, #006385, #20392F)
• Dusty Abyss Lantern color palette (#DEEFE5, #92B1A6, #917490, #003E4D, #081710)
• Cobalt Pier color palette (#D6EAE2, #007AAE, #3F2A3D, #13231D, #050E0E)
• Tempered Dune color palette (#DBFFEC, #89B1DB, #9D788B, #8C512A, #514E00)

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