Tempered Petrol color palette — #F9F3F9 · #9BC3F6 · #9F6A85 · #486FA0 · #382A29

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

The five colors

• Ivory (#F9F3F9): bright and airy, almost weightless.
• Sky (#9BC3F6): A luminous, balanced blue — the color of open sky before noon.
• Mocha (#9F6A85): A full-bodied, dusty rose — the color of pressed rose petals.
• Slate (#486FA0): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Espresso (#382A29): A deep, shadowed, dusty orange — the color of autumn markets.

Feels like: Trust, Stability, Sophistication. Tagged duotone, 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

• Muted Aqua color palette (#EFF8F0, #71D2DA, #966B9D, #2C7A80, #372A2C)
• Petrol Summit color palette (#EBF4F1, #9FC9E8, #AD6E7A, #3E789F, #20110E)
• Mallow Boulevard color palette (#FCF2F6, #CCB1F6, #AF6757, #776098, #332C29)
• Cerulean Canyon color palette (#F0F6FC, #ABD7FA, #C88597, #5493C3, #332A35)
• Timeworn Periwinkle Orchard color palette (#F6F7E4, #95A2E8, #906888, #3F6346, #53424A)
• Tempered Dune color palette (#FBF2F7, #E6D8D5, #AFAFA3, #96778B, #585055)
• Aged Mallow Bloom color palette (#FFF1F5, #DFDAF5, #D0B4F1, #C6848E, #573A40)
• Ancient Iris color palette (#FEF1F8, #948CDB, #986239, #53544D, #26452D)

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