Petrol Harbor color palette — #E6F2E8 · #98B5CD · #2A6AAC · #004E5A · #172860
A conversation between Slate and Navy, giving this palette its sense of trust and stability.
The five colors
- Cream (#E6F2E8): a clean, paper-quiet neutral.
- Ash (#98B5CD): A luminous, dusty blue — the color of open sky before noon.
- Slate (#2A6AAC): 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 (#172860): A deep, shadowed, balanced violet — the color of wild irises.
Feels like: Trust, Stability, Creativity, Calm, Balance. 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 Coast color palette (#E8F1EA, #89BAC8, #007584, #00523E, #003343)
- Cobalt Veranda color palette (#EEF8F0, #ADC8E3, #5C78AC, #005C74, #33365D)
- Wandering Sapphire Boulevard color palette (#F0E6EA, #93B8D4, #3664C8, #004C47, #170E31)
- Ancient Periwinkle Cabin color palette (#F4EEE3, #A7DBFC, #66A8F1, #008EA2, #202C4D)
- Antique Denim color palette (#D7E3D9, #559AB1, #005072, #003030, #00142B)
- Worn Nightshade color palette (#ECECFF, #DAB2D6, #DD7F95, #5A4AA6, #422849)
- Tempered Loft color palette (#F1F7F2, #D9DDED, #819BC1, #32798C, #485368)
- Muted Amethyst Pier color palette (#DDDDFD, #8152A6, #855100, #005954, #291339)
Browse the whole catalog at Explore, or see today's palette.