Petrol Harbor color palette — #F1F3E8 · #86C7D7 · #007E9D · #005155 · #001D2A

Cerulean and Sky set the tone — five colors that lean into trust and stability.

The five colors

• Cream (#F1F3E8): bright and airy, almost weightless.
• Sky (#86C7D7): A luminous, dusty blue — the color of deep harbor water.
• Cerulean (#007E9D): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#005155): A deep, shadowed, dusty blue — the color of deep harbor water.
• Midnight (#001D2A): A deep, shadowed, dusty blue — the color of deep harbor water.

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

• Softworn Navy Villa color palette (#FFF0FA, #58C9E1, #0077A6, #00574A, #00306C)
• Aged Sapphire Station color palette (#EEF5E2, #8BC1F1, #0070D6, #004D6A, #000F50)
• Cerulean Villa color palette (#E4FBF7, #66DDF8, #009BC0, #007177, #00384E)
• Softworn Cobalt Corridor color palette (#F0F4E7, #AEDBCE, #3D84D8, #005D7F, #092153)
• Muted Navy Meadow color palette (#DFE3D4, #497F9F, #003F65, #001E27, #000105)
• Antique Lagoon color palette (#ECEEE3, #67A7BB, #00617F, #00383E, #000C16)
• Washed Indigo Field color palette (#DDE0FF, #6452EC, #B1007A, #005C6D, #0C0036)
• Frosted Nightshade Station color palette (#F7E2F0, #6B71FF, #008472, #3C00D3, #001B16)

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