Tempered Petrol color palette — #F0F7F3 · #E1D3D1 · #D1B6B5 · #3C7F90 · #414A45

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

The five colors

• Ivory (#F0F7F3): a clean, paper-quiet neutral.
• Silver (#E1D3D1): a clean, paper-quiet neutral.
• Stone (#D1B6B5): A luminous, dusty orange — the color of autumn markets.
• Slate (#3C7F90): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#414A45): 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

• Aged Petrol color palette (#EBF3F8, #D5D6E0, #BCBAC7, #557A91, #272D31)
• Tempered Delta color palette (#F8F5EC, #AEB48C, #2A8474, #3D6257, #414700)
• Softworn Grove color palette (#E9FAF4, #E0CCD9, #C698A3, #006091, #1E3931)
• Antique Veranda color palette (#EFF6FB, #D9DAE4, #BCAFBA, #76B6CE, #3E4A50)
• Worn Abyss color palette (#DEE8E3, #B4A4B0, #977480, #003D54, #081711)
• Worn Terrace color palette (#ECE0EE, #1D73C2, #482536, #261A27, #0A1312)
• Chestnut Market color palette (#E5FDE1, #90BFB3, #977AA3, #746417, #3E5715)
• Softworn Veranda color palette (#EEE6E8, #C6B4B4, #AB8476, #562D79, #2B1920)

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