Petrol Harbor color palette — #F3EEE4 · #7DBBD4 · #1A6F9F · #004F53 · #0C2E55
A conversation between Peacock and Navy, giving this palette its sense of trust and stability.
The five colors
- Cream (#F3EEE4): a clean, paper-quiet neutral.
- Sky (#7DBBD4): A luminous, dusty blue — the color of deep harbor water.
- Peacock (#1A6F9F): A full-bodied, balanced blue — the color of open sky before noon.
- Forest (#004F53): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
- Navy (#0C2E55): A deep, shadowed, balanced blue — the color of a favorite pair of jeans.
Feels like: 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
- Petrol Grove color palette (#F6EDDF, #9BBB9D, #007586, #005140, #003344)
- Weathered Corridor color palette (#FAF4EC, #A6D0C0, #437BB6, #005E6B, #293960)
- Tempered Quarry color palette (#ECE4D8, #78A3CC, #2B53A1, #003C4B, #171846)
- Timeworn Cobalt color palette (#F2E6DF, #96BEA9, #2A6CB4, #004C40, #120A3D)
- Washed Azure Atelier color palette (#E9F1EA, #B1DAF2, #28AFFA, #009096, #102E53)
- Tempered Cerulean color palette (#EDE6DA, #469EAB, #005268, #00302B, #001625)
- Cypress Drift color palette (#F9F4EE, #CFE2D0, #4997A7, #0E725D, #2C5041)
- Navy Veranda color palette (#E5DED2, #5C85A5, #00397D, #002129, #04002D)
Browse the whole catalog at Explore, or see today's palette.