Petrol Harbor color palette — #EFF6FB · #D8D9E1 · #BEBDCF · #3A7E97 · #40494F

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

The five colors

• Ivory (#EFF6FB): bright and airy, almost weightless.
• Silver (#D8D9E1): bright and airy, almost weightless.
• Ash (#BEBDCF): A luminous, dusty violet — the color of wild irises.
• Slate (#3A7E97): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#40494F): 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

• Antique Workshop color palette (#ECF3F7, #D7D7E1, #C0BAC7, #07829D, #242E33)
• Dusty Indigo Alley color palette (#F1F5FF, #DFD6E5, #BCB9CD, #5D5EB5, #383F52)
• Ancient Cerulean color palette (#F0F7F3, #DED4D3, #A9A195, #499CB3, #3F4B44)
• Abyss Loft color palette (#EDF7FF, #A6B6D2, #7F7F9A, #755764, #32523E)
• Weathered Cypress Study color palette (#E6FAF6, #8ABAB9, #4B7F71, #366070, #274949)
• Antique Abyss color palette (#D6E2EB, #9EAABA, #727F9C, #003C58, #031623)
• Hazy Delta color palette (#EDF6FF, #83E6FE, #76C6FF, #8682D4, #2D4362)
• Tempered Aubergine Grove color palette (#DFDFE7, #BBB6C7, #9786A3, #5D2876, #1E1C31)

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