Tempered Petrol color palette — #F0F6FC · #D9D9E1 · #C1BCCD · #4B7A9C · #41494F

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

The five colors

• Ivory (#F0F6FC): bright and airy, almost weightless.
• Silver (#D9D9E1): a clean, paper-quiet neutral.
• Stone (#C1BCCD): A luminous, dusty violet — the color of twilight just after sunset.
• Slate (#4B7A9C): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal (#41494F): a grounded near-black with real depth.

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 Veranda color palette (#EDF3F7, #D8D6E0, #C2B9C4, #397DA3, #242D35)
• Dusty Indigo Coast color palette (#F3F4FF, #E1D5E3, #C0B7CE, #7259A7, #3C3E51)
• Softworn Basin color palette (#F0F7F4, #DED4D1, #ABA594, #5798BC, #3C4C45)
• Powder Balcony color palette (#EFF6FF, #B3BDE2, #89849D, #586B59, #2F5657)
• Muted Meadow color palette (#E8F0F8, #A2A9B8, #777D9D, #00376B, #051426)
• Weathered Periwinkle Basin color palette (#EFF6FF, #CBDEFD, #86AFF9, #9670B7, #313C59)
• Aged Stone color palette (#ECF9EE, #B6B282, #6D7951, #3E5E71, #32483D)
• Hushed Basin color palette (#E3E0EB, #BDB5C4, #9A879C, #642961, #211C2D)

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