Tempered Petrol color palette — #F0F7F3 · #D2DDDD · #AFC4C7 · #3A7E97 · #404A45

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

The five colors

• Ivory (#F0F7F3): a clean, paper-quiet neutral.
• Silver (#D2DDDD): a clean, paper-quiet neutral.
• Stone (#AFC4C7): A luminous, dusty blue — the color of deep harbor water.
• Slate (#3A7E97): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#404A45): 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

• Softworn Petrol Loft color palette (#ECF4EF, #CADEE1, #D1BEC0, #497E8D, #242F29)
• Ancient Abyss color palette (#E3EDE9, #96B0A9, #6980A4, #003C59, #031812)
• Wandering Fern Alley color palette (#F4F7E9, #A7B68E, #36836D, #476243, #374A00)
• Indigo Villa color palette (#FAF2F7, #EBD4D4, #DAAEBE, #5F5CB9, #4B3945)
• Denim Basin color palette (#E8FAF5, #DDCCDC, #BC9AB5, #005D9D, #193A32)
• Muted Dune color palette (#E6FBF4, #A9E5FF, #87C7FF, #748CDB, #4A374B)
• Timeworn Terrace color palette (#EBE0EC, #3274B7, #3F2A3D, #261A27, #0A1213)
• Aged Cocoa Market color palette (#FFE5FD, #C5ACBC, #9C7587, #7A5751, #674100)

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