Tempered Petrol color palette — #FCF1FC · #E2BC99 · #4F74A1 · #23446A · #271E28

Built around Slate, softened by Navy — the whole palette hums with trust and stability.

The five colors

• Ivory (#FCF1FC): bright and airy, almost weightless.
• Sand (#E2BC99): A luminous, dusty gold — the color of old brass.
• Slate (#4F74A1): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Navy (#23446A): A deep, shadowed, dusty blue — the color of deep harbor water.
• Onyx (#271E28): A deep, shadowed, dusty pink — the color of peonies in June.

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

• Cobalt Terrace color palette (#EFF6FF, #FFDECB, #5677AC, #283950, #07101B)
• Denim Quarry color palette (#EEF6FF, #83BE98, #0D5588, #163047, #1A1B26)
• Tempered Mulberry color palette (#F8EBED, #A5BE8D, #814B8B, #48254F, #250D14)
• Iris Coast color palette (#F9F3F7, #E3D8D6, #CDBDB5, #8788C4, #4E444A)
• Softworn Seafoam Basin color palette (#E9FAF4, #A3E9B2, #6C9BBE, #406D60, #172521)
• Cornflower Market color palette (#FAF2FA, #9BC8FD, #CB707D, #1D81E3, #321E19)
• Timeworn Pine color palette (#F8F7DF, #98AFED, #A273A2, #1D7546, #513243)
• Lilac Lantern color palette (#FFF1F7, #A490DA, #BC7792, #8B690C, #432A36)

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