Petrol Pier color palette — #CCECED · #007D89 · #004F5D · #002935 · #000A11

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

The five colors

• Frost (#CCECED): A whisper-light, dusty teal — the color of sea glass.
• Teal (#007D89): A full-bodied, balanced blue — the color of open sky before noon.
• Peacock (#004F5D): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
• Midnight (#002935): A deep, shadowed, dusty blue — the color of open sky before noon.
• Ink (#000A11): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.

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

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

• Cobalt Workshop color palette (#D6E8F4, #0086B9, #004E71, #001E2E, #000204)
• Tempered Aubergine color palette (#D0E9F9, #007494, #852392, #003E51, #0F0012)
• Wandering Pine color palette (#E3F4E7, #008152, #004F3A, #003026, #000F0C)
• Muted Drift color palette (#D8EAF6, #949BE1, #5C7BD0, #00556B, #00101F)
• Chalky Aubergine Loft color palette (#C3EAFB, #00617D, #532EA3, #004A2E, #000204)
• Azure Atelier color palette (#D1F0FD, #00AFE8, #0082BA, #005585, #002954)
• Weathered Bronze Lantern color palette (#E0F4E3, #836C22, #5A4000, #341F00, #040300)
• Powdered Aqua Market color palette (#E0F5F9, #00CBF4, #009AC2, #006B94, #003F61)

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