Tempered Petrol color palette — #F9EBE4 · #7FC5C2 · #007487 · #004123 · #000306

A conversation between Teal and Forest, giving this palette its sense of nature and growth.

The five colors

• Cream (#F9EBE4): bright and airy, almost weightless.
• Mint Leaf (#7FC5C2): A luminous, dusty teal — the color of sea glass.
• Teal (#007487): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Forest (#004123): A deep, shadowed, balanced teal — the color of glacier melt.
• Ink (#000306): quiet, heavy and certain.

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

• Washed Ultramarine color palette (#FBEBDC, #8DBDE0, #3763B6, #003D42, #020012)
• Patina Cobalt color palette (#FFF2EC, #98D8E3, #0085B2, #005342, #000D20)
• Aged Thicket color palette (#D5E9E4, #6CC1BE, #00959C, #006E60, #00181C)
• Wandering Lagoon Grove color palette (#E2E2D7, #399B99, #005459, #002C25, #000507)
• Misty Moss color palette (#E7DFC7, #869000, #3B5D00, #00320B, #000402)
• Turquoise Villa color palette (#F6F7CC, #8BDDCA, #3FB2D3, #605500, #000702)
• Azure Orchard color palette (#FFF2EC, #C2FAFF, #00A9D6, #007557, #002644)
• Washed Pier color palette (#E9E9D8, #659F1F, #8F1E8D, #284600, #030003)

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