Tempered Petrol color palette — #F7ECE3 · #89B8D5 · #3B68A8 · #004F52 · #262757

A conversation between Slate and Deep Indigo, giving this palette its sense of trust and stability.

The five colors

• Cream (#F7ECE3): bright and airy, almost weightless.
• Sky (#89B8D5): A luminous, dusty blue — the color of open sky before noon.
• Slate (#3B68A8): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#004F52): A deep, shadowed, dusty teal — the color of sea glass.
• Deep Indigo (#262757): A deep, shadowed, balanced violet — the color of twilight just after sunset.

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

• Ancient Petrol Chapel color palette (#F7ECE7, #9ABBA1, #007296, #00523F, #002F57)
• Dusty Petrol Courtyard color palette (#E0ECEB, #8CBAD6, #0071B0, #00485B, #001630)
• Cobalt Summit color palette (#FAF4ED, #A4D0C3, #5C75B8, #005E6A, #3A3558)
• Antique Teal color palette (#F2E7E1, #55AFB1, #006176, #004028, #002237)
• Periwinkle Delta color palette (#F5EBEF, #A6DBFB, #65A5FF, #009095, #262854)
• Forest Thicket color palette (#E1F2D9, #8DD3E3, #7F9AD7, #1D7137, #00363A)
• Hushed Parlor color palette (#FAF4EE, #C9E8EB, #8399C4, #387A81, #634A59)
• Teal Dune color palette (#9DF8F8, #00AAA5, #005E60, #002E2B, #001718)

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