Petrol Ridge color palette — #F8F3F8 · #E5D8D8 · #D2BAB6 · #57769D · #4D444D

A conversation between Slate and Stone, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F8F3F8): bright and airy, almost weightless.
• Silver (#E5D8D8): a clean, paper-quiet neutral.
• Stone (#D2BAB6): A luminous, dusty orange — the color of toasted spice.
• Slate (#57769D): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#4D444D): 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 Petrol Ridge 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

• Worn Petrol Boulevard color palette (#EDF2F9, #D8D6E2, #BFBAC8, #5E759F, #262C35)
• Dusty Grove color palette (#FEF1F5, #E9D5CC, #DBB1A7, #834EA8, #4D3A40)
• Aged Lagoon color palette (#F1F6FC, #DCD9E3, #B9ADB4, #8CADE0, #404854)
• Tempered Indigo color palette (#EFE0E8, #6A62BD, #4A252E, #291A23, #120A0D)
• Washed Garnet color palette (#F3EBEB, #C6B5B0, #A38777, #6B2654, #2D1919)
• Hushed Fern color palette (#D6FFF4, #C5A2B5, #A07577, #606C25, #435447)
• Hushed Olive Terrace color palette (#FBF4EA, #BAAF88, #588046, #6F4E62, #504100)
• Wandering Courtyard color palette (#FCF2F8, #E4CBD3, #C396B9, #4544C0, #422A3B)

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