Petrol Harbor color palette — #D3F9EF · #4E8A9E · #5A5F8B · #613E25 · #220C00

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

The five colors

• Honeydew (#D3F9EF): A whisper-light, dusty teal — the color of shallow lagoons.
• Storm Blue (#4E8A9E): A luminous, dusty blue — the color of deep harbor water.
• Slate (#5A5F8B): A full-bodied, dusty violet — the color of wild irises.
• Cocoa (#613E25): A deep, shadowed, dusty gold — the color of old brass.
• Ink (#220C00): A deep, shadowed, dusty gold — the color of old brass.

Feels like: Trust, Stability, Optimism, Creativity, Calm, Sophistication. Tagged vintage, retro, muted, cool.

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 Market color palette (#E7EFE2, #5B9481, #427288, #673C41, #250007)
• Worn Orchard color palette (#CBE5ED, #6787B9, #80548C, #434A1C, #0F1A00)
• Aged Basalt Delta color palette (#D5E3F0, #5C72A4, #4C4A76, #52183B, #26000C)
• Misty Meadow color palette (#DAF1E7, #0088BF, #886E00, #005B82, #090500)
• Obsidian Navy Summit color palette (#CDEDE2, #006C77, #0C3174, #291600, #040200)
• Cobalt Garden color palette (#CEE1F6, #0071C2, #935500, #52580A, #000206)
• Pale Cobalt color palette (#F1E8E0, #6FA7D2, #4E71BF, #005C65, #0A0028)
• Wandering Navy color palette (#D1EFF3, #008CAA, #006195, #003B83, #070036)

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