Petrol Harbor color palette — #EEEFE7 · #9ABBA1 · #007587 · #00504E · #003442

A conversation between Teal and Forest, giving this palette its sense of nature and growth.

The five colors

• Cream (#EEEFE7): bright and airy, almost weightless.
• Sage (#9ABBA1): A luminous, dusty teal — the color of shallow lagoons.
• Teal (#007587): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#00504E): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Deep Teal (#003442): A deep, shadowed, dusty blue — the color of deep harbor water.

Feels like: Nature, Growth, Trust, Stability, 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

• Weathered Petrol color palette (#EDF0E3, #88B9D5, #006EA9, #004D5F, #022F56)
• Patina Corridor color palette (#DEF8E9, #89C7EC, #6F9ACC, #006876, #0F3E2D)
• Lagoon Courtyard color palette (#D2F9F6, #00A3A6, #00666D, #00464F, #112A41)
• Hushed Cerulean Delta color palette (#F5EBF2, #82D4DD, #0093BE, #006F54, #032F53)
• Aged Canyon color palette (#E4E4D1, #579D98, #005557, #003127, #00181B)
• Pale Turquoise color palette (#DFF4F0, #86E4F1, #00B8D5, #00918E, #003442)
• Softworn Byzantium color palette (#CAE6D3, #008EA4, #8B42B5, #005260, #39134E)
• Petrol Workshop color palette (#F4F6EE, #C6E4D9, #618FB8, #006C8A, #583C59)

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