Petrol Pier color palette — #FFF0F9 · #F3C7E8 · #E49690 · #216C9E · #53313D

Peacock and Melon set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#FFF0F9): bright and airy, almost weightless.
• Thistle (#F3C7E8): A whisper-light, dusty pink — the color of peonies in June.
• Melon (#E49690): A luminous, balanced orange — the color of sun-warmed clay.
• Peacock (#216C9E): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Charcoal (#53313D): A deep, shadowed, dusty rose — the color of a warm blush.

Feels like: Trust, Stability, Warmth, Comfort, Sophistication. Tagged pastel, light, muted, warm.

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

• Hushed Blush Canyon color palette (#EFF1FF, #F1CBF7, #DE93B5, #59649F, #27263D)
• Muted Indigo color palette (#FFF1F2, #FCD0BF, #C1A675, #6B5CAE, #573430)
• Tempered Ash Archive color palette (#DFFEF0, #F2CDE7, #D398C0, #007674, #2C3B5C)
• Timeworn Mallow color palette (#FFF1F6, #FFD2DB, #F5A3CC, #7883B7, #523840)
• Lapis Villa color palette (#FFF1F2, #FFAFBA, #D49C0B, #5054D5, #641E39)
• Feathered Grove color palette (#F0D9E3, #D796C7, #CC6F4C, #004D81, #371C3F)
• Weathered Turquoise color palette (#F1F5FF, #FFD4E2, #F0BE9E, #73AEC9, #3C3A54)
• Mulberry Market color palette (#FFE7E3, #EAB286, #9CAE68, #833E7B, #38312D)

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