Petrol Harbor color palette — #F0F7F4 · #E1D7DA · #BFADB9 · #0A6B9A · #2C3F39

Peacock takes the lead with Forest close behind in a set that reads as trust and stability at first glance.

The five colors

• Ivory (#F0F7F4): bright and airy, almost weightless.
• Silver (#E1D7DA): a clean, paper-quiet neutral.
• Ash (#BFADB9): A luminous, dusty pink — the color of peonies in June.
• Peacock (#0A6B9A): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#2C3F39): A deep, shadowed, dusty teal — the color of shallow lagoons.

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

• Petrol Study color palette (#EDF4F0, #E0D4D6, #CEACB9, #296D88, #19231E)
• Worn Cerulean color palette (#F0F6FA, #D9D8E4, #C9B8D3, #428AA8, #313C44)
• Driftwood Study color palette (#FAF3F6, #DFD8D6, #ADADA1, #8379AF, #585054)
• Fern Corridor color palette (#FCF4E8, #A89977, #5E692F, #165364, #38352E)
• Worn Navy color palette (#E8F0EE, #C1B5BE, #A58295, #00467B, #0D241F)
• Muted Byzantium Meadow color palette (#FCF2F4, #E4D6D0, #D7B2AE, #8B48A7, #52373E)
• Timeworn Lapis color palette (#FFF0F9, #E4CBD4, #C49AA2, #522DD7, #3F2C38)
• Worn Abyss Lantern color palette (#F4D6F8, #B991A8, #8C6871, #6D5025, #2D4D27)

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