Petrol Pier color palette — #F1F3EB · #C3E3E3 · #7AA897 · #3E7481 · #183E35

Teal and Taupe set the tone — five colors that lean into trust and stability.

The five colors

• Cream (#F1F3EB): bright and airy, almost weightless.
• Silver (#C3E3E3): A whisper-light, dusty teal — the color of sea glass.
• Taupe (#7AA897): A luminous, dusty teal — the color of shallow lagoons.
• Teal (#3E7481): A full-bodied, dusty blue — the color of deep harbor water.
• Forest (#183E35): A deep, shadowed, dusty teal — the color of sea glass.

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

• Wandering Workshop color palette (#E9EAE0, #9CBDA1, #007988, #004C47, #001A21)
• Aged Terrace color palette (#ECEFDF, #63A7BF, #006082, #003840, #000C17)
• Petrol Villa color palette (#F0F3EC, #C7DFE3, #AF90B0, #40728C, #432E41)
• Lagoon Delta color palette (#EAF4CF, #88C4A2, #4B9577, #216B58, #2B3D21)
• Hushed Teal color palette (#E8F7E2, #52AF9E, #6592B9, #787D48, #1F2B1A)
• Cypress Summit color palette (#EDF5E8, #85C1B1, #8B99D1, #06846F, #41273B)
• Hushed Lagoon color palette (#F3F3E1, #BBDAB7, #009599, #006453, #002B30)
• Muted Lagoon color palette (#FBF4EF, #C4DFEC, #99CFD8, #619F9B, #5B4556)

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