Petrol Harbor color palette — #ECF3F8 · #D8D6E0 · #C1B9C4 · #4A7B9A · #242D35

A conversation between Slate and Onyx, giving this palette its sense of trust and stability.

The five colors

• Ivory (#ECF3F8): bright and airy, almost weightless.
• Silver (#D8D6E0): bright and airy, almost weightless.
• Stone (#C1B9C4): a calm mid-gray that lets other colors speak.
• Slate (#4A7B9A): A full-bodied, dusty blue — the color of open sky before noon.
• Onyx (#242D35): 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 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

• Dusty Cobalt color palette (#F1F6FB, #D9D9E0, #C2BCCD, #307AB0, #41494F)
• Tempered Cypress color palette (#CDF2FF, #AEC0D7, #807B9B, #396762, #1E3A37)
• Wandering Indigo color palette (#EFF1FC, #DDD2DC, #CCB7D0, #6D59B2, #202435)
• Aged Navy Veranda color palette (#D9E3EC, #9A9FAE, #7D7796, #003860, #00040D)
• Worn Pewter Garden color palette (#FCEDF4, #C2B285, #6C7C52, #51536B, #192C1F)
• Cobalt Workshop color palette (#DDE8FB, #586FBF, #312E42, #0E1624, #02070C)
• Aged Denim Thicket color palette (#E7E8F2, #CDC9D4, #AE9DAE, #5F477F, #141521)
• Aged Petrol color palette (#E2F8EE, #44ACC0, #6960A2, #474B00, #102535)

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