Tempered Petrol color palette — #EFF0E3 · #77BFC3 · #007683 · #00504A · #00343F

A conversation between Teal and Mint Leaf, giving this palette its sense of trust and stability.

The five colors

• Cream (#EFF0E3): bright and airy, almost weightless.
• Mint Leaf (#77BFC3): A luminous, dusty blue — the color of a favorite pair of jeans.
• Teal (#007683): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#00504A): A deep, shadowed, dusty teal — the color of sea glass.
• Deep Teal (#00343F): A deep, shadowed, dusty blue — the color of deep harbor water.

Feels like: Trust, Stability, Calm, 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

• Muted Petrol Balcony color palette (#F7E5DC, #60C5CA, #007792, #004E34, #00182A)
• Wandering Lantern color palette (#F5F6EC, #A8D0B4, #0086A1, #005F61, #044155)
• Cobalt Study color palette (#EDF0E5, #89B7DA, #006AB7, #004C64, #162E50)
• Tempered Teal color palette (#E9F2D8, #7DD5B8, #00B6B0, #367240, #353932)
• Worn Orchard color palette (#F8ECE7, #97E3E4, #2FB4E0, #459159, #102E52)
• Misty Emerald Thicket color palette (#DBE2C3, #009842, #006FB3, #005923, #002B4A)
• Tempered Loft color palette (#BDF1D1, #2EB06F, #00623D, #00341C, #001F0E)
• Navy Station color palette (#EAEEE3, #6795B9, #004A89, #002D3E, #001036)

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