Petrol Ridge color palette — #F0F6FC · #DCD9E0 · #C9BAC7 · #5576A0 · #404953
Built around Slate, softened by Stone — the whole palette hums with trust and stability.
The five colors
- Ivory (#F0F6FC): bright and airy, almost weightless.
- Silver (#DCD9E0): bright and airy, almost weightless.
- Stone (#C9BAC7): A luminous, dusty pink — the color of neon signs at night.
- Slate (#5576A0): A full-bodied, dusty blue — the color of deep harbor water.
- Charcoal (#404953): A full-bodied, dusty blue — the color of a favorite pair of jeans.
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
- Grape Harbor color palette (#F4F4FF, #E2D5DD, #CAB4C6, #8152A1, #3E3D53)
- Driftwood Lantern color palette (#E3F1FF, #B1B8D3, #95819D, #4A6A64, #355056)
- Navy Station color palette (#DEE5F0, #A6A8B7, #857897, #163176, #091424)
- Wandering Delta color palette (#EEF9EC, #B2B386, #577F54, #5A5570, #2C4A3D)
- Muted Indigo color palette (#E0E4F2, #6D63B8, #362D46, #1A1E2D, #0C0C13)
- Softworn Ultramarine color palette (#F1F5FE, #D1CFE9, #B19EBF, #4446BE, #2C3342)
- Hushed Workshop color palette (#F0ECF4, #C1B4C0, #A08690, #731857, #231C2A)
- Azure Lantern color palette (#DEFDF5, #4DA2CB, #795995, #3D5720, #2B3E57)
Browse the whole catalog at Explore, or see today's palette.