Petrol Harbor color palette — #F0F6FA · #D7D8E4 · #A4B4CF · #006E8E · #333C42

Peacock and Ash set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#F0F6FA): bright and airy, almost weightless.
• Silver (#D7D8E4): a clean, paper-quiet neutral.
• Ash (#A4B4CF): A luminous, dusty violet — the color of twilight just after sunset.
• Peacock (#006E8E): A full-bodied, balanced blue — the color of deep harbor water.
• Charcoal (#333C42): a grounded near-black with real depth.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

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

• Timeworn Petrol Coast color palette (#EAF4F9, #D4D5E5, #B3B6C6, #306E7F, #1A2226)
• Washed Ultramarine color palette (#F0F5FE, #CDD2E5, #A4A2C6, #3E50AB, #2A3344)
• Worn Cerulean color palette (#EFF7F2, #EED7DE, #D2BDBC, #4E8A9B, #353D38)
• Denim Archive color palette (#D8E2EA, #ADBACB, #858BB4, #004A6D, #10212E)
• Weathered Pewter Station color palette (#C7E5FF, #93A4C1, #7C6B94, #6F4C30, #334D3D)
• Cypress Cabin color palette (#E9F9F6, #6CAB88, #007362, #14545D, #193C3C)
• Ultramarine Lantern color palette (#D6E3F2, #1361B7, #1A2441, #081422, #03040A)
• Weathered Balcony color palette (#EDEEF5, #9898AA, #75698D, #330070, #060816)

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