Petrol Harbor color palette — #E0E9EE · #9CA0AD · #8686A2 · #006F83 · #000B12

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

The five colors

• Frost (#E0E9EE): bright and airy, almost weightless.
• Blue Fog (#9CA0AD): a calm mid-gray that lets other colors speak.
• Slate Blue (#8686A2): A luminous, dusty violet — the color of wild irises.
• Teal (#006F83): A full-bodied, balanced blue — the color of deep harbor water.
• Ink (#000B12): A deep, shadowed, dusty blue — the color of open sky before noon.

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

• Patina Abyss Studio color palette (#DDEBF1, #9BA6B0, #7C85A1, #004F58, #000B11)
• Dusty Petrol Dune color palette (#DBE7DF, #82928B, #536D8F, #003039, #000201)
• Washed Atelier color palette (#C3E4F6, #6D89B3, #726099, #723B12, #150E00)
• Worn Indigo Lagoon color palette (#EBEEF6, #B7ACBF, #A78FA8, #6661C7, #0C1227)
• Patina Ultramarine color palette (#F9E9C9, #0087A8, #1E4FBC, #6E1100, #000409)
• Tempered Emerald Meadow color palette (#D1E9E2, #589A63, #007454, #005355, #000901)
• Mulberry Canyon color palette (#C9E5F8, #007DA5, #812C82, #502D00, #000201)
• Antique Indigo color palette (#C9E6FD, #00B4BF, #009EE2, #655BE0, #000512)

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