Petrol Harbor color palette — #F1E4F0 · #90BBCB · #07749F · #004E2D · #031337

Slate takes the lead with Forest close behind in a set that reads as nature and growth at first glance.

The five colors

• Blush (#F1E4F0): A whisper-light, dusty pink — the color of neon signs at night.
• Ash (#90BBCB): A luminous, dusty blue — the color of open sky before noon.
• Slate (#07749F): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Forest (#004E2D): A deep, shadowed, balanced teal — the color of shallow lagoons.
• Midnight (#031337): A deep, shadowed, dusty violet — the color of wild irises.

Feels like: Nature, Growth, 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

• Washed Petrol Delta color palette (#F5E4E9, #91B8D9, #5364B0, #004B4C, #1E0538)
• Cobalt Ridge color palette (#F7EFF5, #A5CEE2, #4682AE, #005E44, #111F3D)
• Powdered Pier color palette (#EFE1E8, #6EA5BB, #0057A5, #003A31, #09002D)
• Antique Mallow color palette (#D5E7FF, #E8BCFB, #D59099, #006478, #121136)
• Lapis Courtyard color palette (#D7E2FF, #5F58C7, #765A00, #434D0D, #09022A)
• Antique Cypress Delta color palette (#F6EFF5, #D4D2EA, #7EA1BE, #407860, #2B3649)
• Aged Navy Harbor color palette (#F2E1EB, #438295, #003E6A, #002017, #01000B)
• Quiet Cobalt color palette (#CCE1F7, #3183CC, #717000, #00487E, #131300)

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