Petrol Pier color palette — #F7EAF4 · #77BFC8 · #007296 · #00523F · #0C2F50

A conversation between Teal and Forest, giving this palette its sense of trust and stability.

The five colors

• Blush (#F7EAF4): bright and airy, almost weightless.
• Mint Leaf (#77BFC8): A luminous, dusty blue — the color of deep harbor water.
• Teal (#007296): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#00523F): A deep, shadowed, dusty teal — the color of glacier melt.
• Navy (#0C2F50): A deep, shadowed, dusty blue — the color of open sky before noon.

Feels like: Trust, Stability, Calm, Sophistication. Tagged coastal, cool, light, muted.

Use it as a design system

One click turns Petrol Pier 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

• Muted Field color palette (#F7EBEE, #8CB6DD, #4F64A5, #004E59, #2E264E)
• Weathered Petrol Station color palette (#E9EADF, #80C0C7, #00788B, #004B49, #001922)
• Cobalt Quarry color palette (#FCF2F8, #A4CCDF, #2880B2, #006155, #243A5F)
• Denim Lantern color palette (#EEE1E7, #74A7BD, #005A99, #003E3C, #10174D)
• Dusty Villa color palette (#EEF4FF, #CBB2F7, #D884B0, #0E6A8A, #382C53)
• Dusty Turquoise color palette (#F8ECE6, #B7DFC0, #00B4E8, #009473, #122F4C)
• Dusty Garden color palette (#F6E3EF, #41A19B, #005360, #003217, #001623)
• Weathered Cypress color palette (#FAF3F8, #D5E1F3, #73A0BA, #3C7C6D, #445467)

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