Petrol Harbor color palette — #F9F3F8 · #ACC1E8 · #B06177 · #4A6BAE · #3A2926

Slate takes the lead with Mocha close behind in a set that reads as creativity and sophistication at first glance.

The five colors

• Ivory (#F9F3F8): a clean, paper-quiet neutral.
• Sky (#ACC1E8): A luminous, dusty violet — the color of wild irises.
• Mocha (#B06177): A full-bodied, balanced red — the color of a theater curtain.
• Slate (#4A6BAE): A full-bodied, balanced violet — the color of twilight just after sunset.
• Espresso (#3A2926): A deep, shadowed, dusty orange — the color of sun-warmed clay.

Feels like: Creativity, Sophistication. Tagged duotone, 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

• Orchid Bloom color palette (#F0F7F2, #8FCCD9, #A062A7, #007B8D, #38292C)
• Tempered Bronze Corridor color palette (#FBF3F5, #D0B3E4, #B2673E, #82599A, #332C28)
• Weathered Driftwood color palette (#EFF1F9, #C1BCF3, #A46C9D, #7069A1, #17141D)
• Ash Dune color palette (#FBF2F7, #CFCAFF, #C183B7, #8A83BF, #382A2B)
• Washed Cabin color palette (#F7F6E8, #A0A1D9, #9A6286, #1F6752, #574049)
• Misty Mulberry Hollow color palette (#FFF0FB, #C3AEE6, #A671A7, #85405E, #683034)
• Driftwood Workshop color palette (#FAF3F6, #E2D8D5, #ABAEA1, #837BA5, #575053)
• Washed Chestnut color palette (#FEF1F7, #8B7CB6, #9A502D, #2E5D39, #3A2D38)

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