Petrol Garden color palette — #F5F1EB · #C7E3E6 · #7F9ECB · #21768B · #472C40

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

The five colors

• Cream (#F5F1EB): bright and airy, almost weightless.
• Silver (#C7E3E6): A whisper-light, dusty blue — the color of a favorite pair of jeans.
• Blue Fog (#7F9ECB): A luminous, dusty blue — the color of deep harbor water.
• Teal (#21768B): A full-bodied, balanced blue — the color of deep harbor water.
• Espresso (#472C40): A deep, shadowed, dusty pink — the color of neon signs at night.

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

Use it as a design system

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

• Cypress Quarry color palette (#F5F1EB, #C7E3DC, #6BA7B6, #197C69, #213D32)
• Ash Pier color palette (#FBF3F5, #DADEEE, #8898C5, #3B7B79, #4D506A)
• Lagoon Orchard color palette (#FFECF1, #AF8DC1, #AD854F, #208988, #371F26)
• Softworn Petrol Summit color palette (#EDE8E0, #86BECC, #00759D, #004B49, #00172B)
• Dusty Ash Cabin color palette (#FCEEF1, #E4D4CD, #C8BE92, #8E88B8, #4B3437)
• Weathered Denim Bloom color palette (#F2ECE4, #7CA798, #0058A4, #003841, #020033)
• Hushed Cerulean Loft color palette (#F8F1E6, #9DDCE4, #0091B0, #006357, #00293C)
• Patina Basin color palette (#ECE6DD, #569699, #005361, #002D24, #000509)

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