Petrol Pier color palette — #ECF4F0 · #DCD0CE · #C4B5B5 · #3E7D9B · #262E2B

Slate takes the lead with Stone close behind in a set that reads as trust and stability at first glance.

The five colors

• Cream (#ECF4F0): a clean, paper-quiet neutral.
• Oat (#DCD0CE): bright and airy, almost weightless.
• Stone (#C4B5B5): soft and architectural.
• Slate (#3E7D9B): A full-bodied, dusty blue — the color of open sky before noon.
• Onyx (#262E2B): quiet, heavy and certain.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

Use it as a design system

One click turns Petrol Pier 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 Terrace color palette (#F0F7F4, #D2DCDD, #CBBCC0, #3D7BA0, #3D4B46)
• Muted Petrol Villa color palette (#F7EFF4, #E8D1CD, #D6B6B6, #6560A8, #2E2028)
• Lagoon Grove color palette (#F3F3E5, #ACB994, #40827B, #395E4F, #242A16)
• Dusty Quarry color palette (#F0F6FB, #D8D9E2, #CBBFC4, #75A5C3, #394047)
• Abyss Studio color palette (#E0EEE9, #AD99A8, #94707F, #003A5A, #000604)
• Antique Coast color palette (#DEFAE9, #C5B2C4, #A27D88, #6C5B07, #3B3D00)
• Cobalt Ridge color palette (#F7E5F5, #4D74B8, #3F2A33, #1D111D, #020805)
• Timeworn Petrol Villa color palette (#FBF1D9, #59A8C4, #6164A1, #504700, #002A21)

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