Petrol Harbor color palette — #ECF4F0 · #E0B9AC · #36687F · #00364A · #081711
A conversation between Peacock and Deep Teal, giving this palette its sense of trust and stability.
The five colors
- Cream (#ECF4F0): a clean, paper-quiet neutral.
- Sand (#E0B9AC): A luminous, dusty orange — the color of toasted spice.
- Peacock (#36687F): A full-bodied, dusty blue — the color of deep harbor water.
- Deep Teal (#00364A): A deep, shadowed, dusty blue — the color of open sky before noon.
- Ink (#081711): A deep, shadowed, dusty teal — the color of glacier melt.
Feels like: Trust, Stability, Sophistication. Tagged luxury, dark, 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
- Tempered Petrol Market color palette (#F6EFF5, #D5C0A2, #4F6184, #3F273D, #1B0F1A)
- Antique Petrol Archive color palette (#EEF8F1, #D4BD8E, #276876, #1F412D, #1B2927)
- Hushed Cerulean Garden color palette (#EDF7FE, #F7C1C5, #3A86AD, #395061, #252C32)
- Hushed Apricot color palette (#E3F7F1, #E48F67, #004F85, #00223D, #000A07)
- Aged Driftwood Market color palette (#EDF4EE, #A9CEB1, #A76C97, #00818D, #220F11)
- Ancient Study color palette (#F4F3E1, #8EB79B, #76729F, #465A29, #12332A)
- Aged Harbor color palette (#ECF4F1, #DAD1CE, #A19F94, #5B88AC, #303836)
- Navy Pier color palette (#EADDEA, #BC7D48, #003773, #00112C, #040005)
Browse the whole catalog at Explore, or see today's palette.