Petrol Garden color palette — #F1F3EC · #C4E2E4 · #77A1C5 · #367488 · #3F3040
A conversation between Teal and Blue Fog, giving this palette its sense of trust and stability.
The five colors
- Cream (#F1F3EC): a clean, paper-quiet neutral.
- Silver (#C4E2E4): A whisper-light, dusty blue — the color of deep harbor water.
- Blue Fog (#77A1C5): A luminous, dusty blue — the color of open sky before noon.
- Teal (#367488): A full-bodied, dusty blue — the color of open sky before noon.
- Charcoal (#3F3040): A deep, shadowed, dusty pink — the color of peonies in June.
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
- Wandering Ash Harbor color palette (#FCF2F6, #D9DEF0, #7F9BC2, #40797C, #4A5266)
- Weathered Denim color palette (#DEE2D5, #5CA6CB, #005E8C, #003844, #000B1B)
- Petrol Boulevard color palette (#E9EADE, #73C1CE, #00788F, #004B4C, #001923)
- Worn Cerulean Delta color palette (#F2F3E7, #8BE1E3, #0094A2, #00635A, #002A33)
- Tempered Harbor color palette (#F1F4E2, #78AB7A, #009FB4, #8F7345, #272916)
- Muted Navy color palette (#DEE4D5, #4A7DAC, #00397A, #001D2C, #00000C)
- Worn Lagoon Lagoon color palette (#EDEDDB, #279C9A, #005459, #002C25, #000507)
- Tempered Grove color palette (#F5F2E3, #B0BA85, #DA7E80, #6E792F, #432A21)
Browse the whole catalog at Explore, or see today's palette.