Tempered Petrol color palette — #F0F7F3 · #D2DDDD · #B0C4C6 · #258098 · #3D4C43

Cerulean takes the lead with Charcoal close behind in a set that reads as trust and stability at first glance.

The five colors

• Ivory (#F0F7F3): a clean, paper-quiet neutral.
• Silver (#D2DDDD): a clean, paper-quiet neutral.
• Stone (#B0C4C6): A luminous, dusty blue — the color of a favorite pair of jeans.
• Cerulean (#258098): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Charcoal (#3D4C43): A full-bodied, dusty teal — the color of shallow lagoons.

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

• Weathered Cerulean Delta color palette (#F8F3F8, #DFD7D9, #B4ABA0, #5F85B0, #574F58)
• Wandering Petrol color palette (#EDF4EF, #CCDDDE, #D0BCC0, #2C8291, #252F28)
• Fern Market color palette (#F4F7EA, #ABB497, #448169, #1E675E, #3B4900)
• Hushed Denim color palette (#EBF9F4, #DACEDB, #B89DB5, #006091, #193A31)
• Sapphire Field color palette (#FCF2F9, #E4D5D6, #D3B1C0, #5360BB, #4B3A46)
• Hushed Abyss Bloom color palette (#DFEAE5, #9EADA8, #8B778D, #003D53, #001910)
• Cobalt Quarry color palette (#D7EAE4, #2176B4, #3F2A3E, #0C241E, #020F10)
• Hazy Cornflower Loft color palette (#E6FBF3, #BBECFF, #7DC5FF, #6184E4, #503654)

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