Petrol Pier color palette — #FBF3F5 · #DADDEE · #8499C4 · #2C7B85 · #4B5267

Teal and Blue Fog set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#FBF3F5): a clean, paper-quiet neutral.
• Silver (#DADDEE): A whisper-light, dusty violet — the color of wild irises.
• Blue Fog (#8499C4): A luminous, dusty violet — the color of a velvet chair.
• Teal (#2C7B85): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal Brown (#4B5267): A full-bodied, dusty violet — the color of a velvet chair.

Feels like: Trust, Stability, Sophistication. Tagged coastal, cool, light, muted.

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

• Ash Meadow color palette (#F0F3EB, #BFE6EB, #7C9FC7, #437288, #412F40)
• Muted Hollow color palette (#EDF8F7, #D8DBEA, #93B4DA, #5B8EA6, #465465)
• Worn Wisteria color palette (#EBF8FC, #77BDC5, #BF7EBD, #09828C, #4F4961)
• Dusty Veranda color palette (#F5EBF2, #7EBCCD, #0070A1, #005146, #172D50)
• Antique Cerulean color palette (#FEF0FB, #83DFE9, #008CB3, #00694F, #144269)
• Timeworn Lagoon Courtyard color palette (#F5E8F1, #2D9190, #004451, #002412, #000B14)
• Driftwood Corridor color palette (#FCF2F8, #D5AAB9, #A8715A, #6E536E, #3C4D40)
• Teal Ridge color palette (#E3FAFF, #3BACA2, #BB6F86, #9E655C, #2D474D)

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