Petrol Pier color palette — #F0F7F3 · #D0DCDD · #BFADBC · #1D6E86 · #333D38

A conversation between Peacock and Ash, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F0F7F3): a clean, paper-quiet neutral.
• Silver (#D0DCDD): bright and airy, almost weightless.
• Ash (#BFADBC): A luminous, dusty pink — the color of peonies in June.
• Peacock (#1D6E86): A full-bodied, balanced blue — the color of open sky before noon.
• Charcoal (#333D38): 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 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 Cerulean color palette (#EDF7FC, #D7D8E9, #C3BACF, #4D8B98, #323C41)
• Petrol Field color palette (#ECF4EE, #E3D4D9, #C3B1BA, #2D6F7D, #19231D)
• Weathered Indigo color palette (#FBF2F6, #E6D5D1, #DCAFB0, #7657A7, #4A3B41)
• Washed Driftwood Courtyard color palette (#F9F3F7, #E1D7D7, #B0ADA0, #787EAB, #575055)
• Weathered Chestnut color palette (#DAF8EC, #C19CB9, #776894, #7C4913, #523C00)
• Abyss Terrace color palette (#D5E3DD, #C2B3C3, #A18499, #004B69, #0C251C)
• Hushed Cypress color palette (#F6F6EA, #79A789, #00745D, #00565D, #303B00)
• Tempered Ultramarine color palette (#FEF1FB, #E6C9D9, #C19AA7, #2848CA, #3D2C3B)

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