Tempered Petrol color palette — #D1E3EC · #0071A8 · #003D73 · #001448 · #050031

Slate and Navy set the tone — five colors that lean into trust and stability.

The five colors

• Silver (#D1E3EC): A whisper-light, dusty blue — the color of open sky before noon.
• Slate (#0071A8): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Navy (#003D73): A deep, shadowed, balanced blue — the color of a favorite pair of jeans.
• Midnight (#001448): A deep, shadowed, balanced violet — the color of a velvet chair.
• Ink (#050031): A deep, shadowed, balanced violet — the color of wild irises.

Feels like: Trust, Stability, Creativity, Calm, Balance. Tagged cool.

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

• Onyx Studio color palette (#CAF8F5, #00748A, #003965, #11004D, #020008)
• Nightshade Archive color palette (#CFF0FF, #009DE0, #0073C7, #003CAC, #050039)
• Navy Market color palette (#E8D8EB, #005B98, #151686, #310025, #000A20)
• Patina Pier color palette (#C7E7E2, #007D7D, #00444B, #001E25, #020814)
• Nightshade Alley color palette (#CEF2F1, #008EAB, #005A9A, #230091, #120028)
• Weathered Abyss color palette (#DBE5EB, #9FABB4, #6B8297, #003E4E, #001622)
• Patina Aubergine color palette (#DAE6FD, #5C69C5, #3E07A4, #220048, #150025)
• Voltage Lagoon color palette (#D4ECFF, #3094FE, #0D51DD, #2700AC, #2A0073)

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