Tempered Petrol color palette — #E8F8FF · #7DBCC3 · #C9837F · #00828D · #5F425C

A conversation between Teal and Dusty Rose, giving this palette its sense of trust and stability.

The five colors

• Ivory (#E8F8FF): bright and airy, almost weightless.
• Ash (#7DBCC3): A luminous, dusty blue — the color of open sky before noon.
• Dusty Rose (#C9837F): A luminous, balanced orange — the color of autumn markets.
• Teal (#00828D): A full-bodied, balanced blue — the color of deep harbor water.
• Charcoal Brown (#5F425C): A full-bodied, dusty pink — the color of a candy shop window.

Feels like: 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

• Cypress Lantern color palette (#E7F4F9, #81C0C3, #CC887C, #008187, #4B241E)
• Washed Pine Lagoon color palette (#E3FBFA, #84C09B, #B488AE, #3D835C, #514668)
• Wandering Petrol color palette (#EEF6FF, #93B3D9, #B49266, #4875A9, #3E543D)
• Muted Lagoon color palette (#EFF8EE, #8ED3CF, #E49D85, #00A19D, #6B4132)
• Muted Driftwood Workshop color palette (#E9F8FF, #D8DBE6, #BFA7AF, #69919A, #3D515C)
• Hushed Quarry color palette (#E9F8FF, #4DA6B7, #AB74A3, #867541, #2B4753)
• Muted Pier color palette (#FFF1F6, #A8BFA9, #9D7283, #735265, #394D40)
• Hushed Rust Atelier color palette (#EBF7FF, #00A2D0, #C55C00, #006684, #5F2900)

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