Petrol Harbor color palette — #D3E6E2 · #77BFC5 · #008394 · #005A54 · #00242D

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

The five colors

• Silver (#D3E6E2): A whisper-light, dusty teal — the color of glacier melt.
• Mint Leaf (#77BFC5): A luminous, dusty blue — the color of open sky before noon.
• Cerulean (#008394): A full-bodied, balanced blue — the color of deep harbor water.
• Peacock (#005A54): A full-bodied, dusty teal — the color of shallow lagoons.
• Midnight (#00242D): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.

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

• Cobalt Bloom color palette (#DEF4F2, #86B9D6, #007BBC, #00566A, #00203F)
• Washed Thicket color palette (#F5F7E9, #96D9DF, #00899C, #00524E, #000F15)
• Denim Bloom color palette (#EADBE5, #61ADB2, #00617A, #00402D, #00213A)
• Misty Azure color palette (#F7E8E0, #7CD0D5, #00A1C8, #00815B, #002139)
• Turquoise Thicket color palette (#D3F5FF, #00A5C8, #006A82, #003643, #000A0F)
• Bronze Market color palette (#DBF4FB, #00999C, #847500, #005F61, #1F1B00)
• Dusty Azure Hollow color palette (#E6FAF9, #8ED4FF, #0093E5, #006E89, #003363)
• Softworn Lapis color palette (#C4F1FA, #008395, #5659C5, #006B1D, #00151A)

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