Petrol Pier color palette — #F3EDE4 · #9EC1A2 · #007487 · #003F33 · #000306

Teal takes the lead with Forest close behind in a set that reads as nature and growth at first glance.

The five colors

• Cream (#F3EDE4): bright and airy, almost weightless.
• Sage (#9EC1A2): A luminous, dusty green — the color of new leaves after rain.
• Teal (#007487): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Forest (#003F33): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Ink (#000306): quiet, heavy and certain.

Feels like: Nature, Growth, Trust, Stability, 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

• Patina Petrol color palette (#F4EDE3, #85C0DB, #006DA8, #003D42, #00020C)
• Hushed Aubergine color palette (#E9DDC8, #7E6400, #006471, #71006B, #020100)
• Lagoon Station color palette (#F0E5EF, #009DA2, #00516A, #002E11, #000410)
• Weathered Forest color palette (#F9E6E0, #77BEC2, #008FBC, #00723B, #001232)
• Worn Chapel color palette (#F9F4ED, #BBE5EF, #59B4D0, #008172, #02334A)
• Hushed Amber color palette (#FDDBC9, #C07300, #644200, #322500, #020200)
• Softworn Grove color palette (#FEEFBD, #BDCE7C, #6DC076, #764400, #060500)
• Airy Ultramarine Lagoon color palette (#FDEBD1, #A07600, #314FEA, #4E3800, #00000C)

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