Petrol Harbor color palette — #E9F1EA · #97B5CE · #2E6AAB · #004E5A · #1A295C

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

The five colors

• Cream (#E9F1EA): bright and airy, almost weightless.
• Ash (#97B5CE): A luminous, dusty blue — the color of open sky before noon.
• Slate (#2E6AAB): A full-bodied, balanced blue — the color of deep harbor water.
• Deep Teal (#004E5A): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
• Navy (#1A295C): A deep, shadowed, balanced violet — the color of a velvet chair.

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

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

• Petrol Harbor color palette (#E7F2E9, #90B9C5, #007585, #00523F, #003344)
• Cobalt Summit color palette (#EFF8F0, #B1C8DF, #5676BA, #005C75, #333660)
• Muted Sapphire Summit color palette (#F4E4EB, #95B8D4, #4664BD, #004B49, #190D2F)
• Frosted Periwinkle color palette (#F4EEE4, #A5DBFF, #59A7FF, #008EA3, #1D2B54)
• Hushed Denim Coast color palette (#E8F2EA, #5A99AF, #004F73, #003031, #00142C)
• Wandering Petrol Station color palette (#F1F7F2, #DADDED, #7D9AC7, #007B95, #46526C)
• Frosted Plum Harbor color palette (#E9D7EC, #B53557, #476B00, #004F88, #390D18)
• Misty Mulberry Summit color palette (#E6D8EB, #BF5778, #007B72, #880042, #00312C)

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