Tempered Petrol color palette — #F9EAF0 · #86B8D9 · #3567B2 · #004F53 · #272755

Royal Blue and Deep Indigo set the tone — five colors that lean into trust and stability.

The five colors

• Blush (#F9EAF0): bright and airy, almost weightless.
• Sky (#86B8D9): A luminous, dusty blue — the color of a favorite pair of jeans.
• Royal Blue (#3567B2): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#004F53): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
• Deep Indigo (#272755): A deep, shadowed, balanced violet — the color of a velvet chair.

Feels like: Trust, Stability, Creativity, Calm, Balance. 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 Cobalt color palette (#FFF1F5, #AEC8E3, #5E74B7, #005E6B, #3B335C)
• Washed Petrol Loft color palette (#F8EAF3, #7BBFBF, #00748A, #005332, #00324B)
• Hushed Meadow color palette (#E7EBDE, #8DC0AD, #2170AA, #00485C, #001631)
• Softworn Cabin color palette (#F5EDE6, #A3DBFF, #68A4FF, #009096, #282A4C)
• Ancient Station color palette (#EED9E5, #499CB4, #004E79, #00302B, #000844)
• Muted Coast color palette (#FBF2F5, #DADEEE, #8599C2, #3A7A81, #49516C)
• Weathered Pier color palette (#E9DBE4, #518C8B, #004451, #002413, #000B14)
• Airy Aubergine Workshop color palette (#BFE9D9, #879821, #73409A, #454F00, #391153)

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