Petrol Harbor color palette — #ECF3F9 · #D6D4E3 · #B3B6C7 · #376A8C · #1A2128

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

The five colors

• Ivory (#ECF3F9): a clean, paper-quiet neutral.
• Silver (#D6D4E3): A whisper-light, dusty violet — the color of a velvet chair.
• Ash (#B3B6C7): A luminous, dusty violet — the color of wild irises.
• Peacock (#376A8C): A full-bodied, dusty blue — the color of open sky before noon.
• Onyx (#1A2128): quiet, heavy and certain.

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

Use it as a design system

One click turns Petrol Harbor 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

• Tempered Ridge color palette (#EFF7F4, #E3D7D9, #C0AEB2, #156B98, #313E39)
• Wandering Pewter Boulevard color palette (#F1F0FC, #E4D0DE, #CFB5D0, #825792, #242332)
• Worn Mulberry Hollow color palette (#EAE7F1, #D2C7D7, #B19CAD, #6F426E, #171320)
• Wandering Cerulean color palette (#EEF8F5, #E3D3D0, #A7A59A, #668EB4, #25312E)
• Ash Pier color palette (#D2ECFF, #9799D0, #7F7291, #295648, #102C24)
• Washed Navy Terrace color palette (#DCE5EF, #ACB3C4, #8B8BA1, #00447D, #040B15)
• Hushed Onyx color palette (#E6E7EF, #9188A2, #75647A, #371454, #010105)
• Olive Boulevard color palette (#FFECF2, #AFA154, #576E27, #384663, #072215)

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