Petrol Ridge color palette — #F0F7F3 · #D2DDDE · #D1BCBF · #3B7F91 · #3F4B44

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

The five colors

• Ivory (#F0F7F3): a clean, paper-quiet neutral.
• Silver (#D2DDDE): bright and airy, almost weightless.
• Stone (#D1BCBF): A luminous, dusty red — the color of late-summer berries.
• Slate (#3B7F91): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#3F4B44): quiet, heavy and certain.

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

• Muted Cerulean color palette (#F8F3F9, #E1D7D8, #B1ADA0, #6285AB, #565057)
• Petrol Harbor color palette (#EBF3F8, #D4D7E1, #B9BBCB, #4C7D91, #262D32)
• Cobalt Corridor color palette (#FCF2F9, #EBD4D2, #D5B2B6, #5363B2, #4A3A46)
• Worn Denim Studio color palette (#EEF8F4, #E3C9DE, #AB9DD0, #00618F, #243831)
• Worn Lagoon color palette (#F7F5EB, #ADB48A, #14866D, #3B644E, #414700)
• Tempered Abyss Lagoon color palette (#D9E4DE, #B4A3B3, #957486, #003D52, #081711)
• Softworn Delta color palette (#E1FEE9, #C6A9C5, #9381AC, #786518, #3E5819)
• Tempered Cobalt color palette (#D4EAE4, #0075C3, #452739, #0F231F, #070F0E)

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