Tempered Petrol color palette — #F2E7C1 · #9BAD8A · #3A7F9C · #704A27 · #4B3E00

Slate takes the lead with Deep Olive close behind in a set that reads as nature and growth at first glance.

The five colors

• Parchment (#F2E7C1): A whisper-light, dusty green — the color of new leaves after rain.
• Sage (#9BAD8A): A luminous, dusty green — the color of a quiet forest floor.
• Slate (#3A7F9C): A full-bodied, balanced blue — the color of open sky before noon.
• Coffee (#704A27): A full-bodied, dusty gold — the color of afternoon light on wheat.
• Deep Olive (#4B3E00): A deep, shadowed, dusty green — the color of new leaves after rain.

Feels like: Nature, Growth, Trust, Stability, Optimism, Sophistication. Tagged vintage, retro, 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

• Softworn Chestnut Harbor color palette (#EFEECF, #AABFA3, #6686A8, #7E5D15, #4E5200)
• Timeworn Coast color palette (#F8F6E7, #79A78B, #00726F, #564B00, #2E3B00)
• Chestnut Garden color palette (#E2EACC, #64ADAF, #8F708D, #7A490F, #4C3E00)
• Cocoa Workshop color palette (#D2EEE7, #99CFD9, #88AFCC, #997890, #5C3F19)
• Weathered Balcony color palette (#D6F2E7, #73CAD4, #6E9D8B, #82625F, #692E0D)
• Tempered Courtyard color palette (#E8F4D8, #219491, #315E84, #572F00, #3A2002)
• Timeworn Ridge color palette (#CDEAE1, #58B4BD, #5C7A92, #5B4668, #371E33)
• Hushed Bronze Harbor color palette (#D1EDD9, #00899A, #995C00, #635400, #12331E)

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