Tempered Petrol color palette — #EDF3F7 · #D5D6DC · #BBBAC9 · #317F9B · #222E35

Cerulean and Ash set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#EDF3F7): bright and airy, almost weightless.
• Silver (#D5D6DC): a clean, paper-quiet neutral.
• Ash (#BBBAC9): A luminous, dusty violet — the color of wild irises.
• Cerulean (#317F9B): A full-bodied, balanced blue — the color of deep harbor water.
• Onyx (#222E35): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

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

• Petrol Cabin color palette (#F1F7F3, #E1D3D1, #D3B5B5, #377F90, #424A45)
• Washed Archive color palette (#EFF2F9, #DCD3E3, #BFBCD2, #5D5FB7, #1D2438)
• Lagoon Basin color palette (#E6F6F3, #91BDBC, #3E8472, #205F67, #002E2E)
• Aged Abyss color palette (#D8E2E9, #96A1AF, #717C92, #003B56, #00050C)
• Weathered Driftwood Pier color palette (#E6F4FF, #A8B3C7, #8586AE, #764F60, #253E2F)
• Washed Turquoise color palette (#F0F6FA, #DADAE3, #C0B4B0, #42ADC9, #334249)
• Antique Petrol Hollow color palette (#E4F8E7, #62A6C8, #5766A5, #703116, #102437)
• Antique Aubergine Workshop color palette (#DFDFE8, #B5B1BD, #9786A2, #5E2279, #0A0817)

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