Tempered Petrol color palette — #F7F6EA · #8FA067 · #2976AC · #77404E · #47413C

Slate and Moss set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F7F6EA): bright and airy, almost weightless.
• Moss (#8FA067): A luminous, balanced green — the color of fresh herbs.
• Slate (#2976AC): A full-bodied, balanced blue — the color of deep harbor water.
• Coffee (#77404E): A full-bodied, dusty red — the color of late-summer berries.
• Charcoal (#47413C): a grounded near-black with real depth.

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

• Antique Garden color palette (#F3F7EC, #61AA83, #6866AE, #75462D, #46413B)
• Worn Teal Villa color palette (#E5F5F7, #3FB393, #207D98, #404A6F, #092E26)
• Lagoon Loft color palette (#EEFBDD, #74C6B6, #009294, #137188, #345348)
• Wandering Ash Market color palette (#FAF3F0, #CCE7E1, #68A3B9, #477B65, #345149)
• Muted Basin color palette (#EEF9ED, #009D99, #814990, #5C4400, #3A3B01)
• Muted Bronze color palette (#F9F7DC, #C5D0B8, #799E8B, #9F5E40, #7A4316)
• Ancient Lagoon Loft color palette (#EEF4E9, #2F9073, #2E4233, #252B20, #121612)
• Chestnut Hollow color palette (#F7F5EE, #BFC4A5, #548F7B, #756518, #4C5200)

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