Petrol Coast color palette — #F2E6E1 · #97BEA4 · #0072AC · #004D37 · #091039

Slate and Deep Indigo set the tone — five colors that lean into nature and growth.

The five colors

• Parchment (#F2E6E1): bright and airy, almost weightless.
• Sage (#97BEA4): A luminous, dusty teal — the color of shallow lagoons.
• Slate (#0072AC): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#004D37): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Deep Indigo (#091039): A deep, shadowed, dusty violet — the color of a velvet chair.

Feels like: Nature, Growth, Trust, Stability, Creativity, Calm. Tagged coastal, cool, light, muted.

Use it as a design system

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

• Timeworn Sapphire Orchard color palette (#F2E7DD, #8DBAD8, #4865B9, #004B49, #1B0738)
• Antique Cobalt color palette (#F9F0EB, #B3CFC0, #527FB0, #005D4D, #1B1B3F)
• Muted Meadow color palette (#EED7E4, #625CB8, #6B5F00, #36511A, #0A012B)
• Lagoon Basin color palette (#EEDEDA, #489999, #005168, #002E0D, #00040F)
• Iris Bloom color palette (#F7F1EB, #C1E6DA, #7B89C7, #006C6E, #3F212E)
• Dusty Coral Parlor color palette (#FEDBF5, #E4BEE9, #D68687, #006A8B, #301020)
• Navy Veranda color palette (#F0E7E1, #4C8097, #00387B, #00201B, #01000A)
• Linen Pier color palette (#CAEAF7, #0087C8, #244DCC, #3F008A, #20002C)

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