Tempered Petrol color palette — #F0F7F4 · #DFD4D1 · #CDB7B4 · #3F7D98 · #424A46

Slate and Stone set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#F0F7F4): bright and airy, almost weightless.
• Silver (#DFD4D1): bright and airy, almost weightless.
• Stone (#CDB7B4): A luminous, dusty orange — the color of toasted spice.
• Slate (#3F7D98): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#424A46): 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

• Petrol Study color palette (#ECF3F9, #D6D6E2, #BFBACE, #507B96, #262D33)
• Pewter Thicket color palette (#FAF3F5, #E6D6CE, #CAACA1, #6F578A, #45363B)
• Driftwood Canyon color palette (#EEF8F4, #E2D3D1, #AA9F91, #6C9B8A, #414A47)
• Wandering Denim color palette (#EBF9F5, #E4CAD8, #BE97BF, #005CA0, #1B3933)
• Muted Fern Meadow color palette (#EAFBE9, #98C1B5, #927EAA, #5F661D, #3E4F3F)
• Washed Abyss Dune color palette (#D8E8E2, #B7A2AF, #9C717C, #003B5C, #031812)
• Hushed Olive color palette (#FDF3ED, #C3AB89, #727A30, #6F4F5C, #5A3B00)
• Washed Cobalt color palette (#EFDFED, #436EC0, #492532, #261A25, #081313)

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