Petrol Grove color palette — #FAF4EC · #C8E3D9 · #668DB9 · #006E7E · #5A3C55

Built around Teal, softened by Slate Blue — the whole palette hums with trust and stability.

The five colors

• Ivory (#FAF4EC): bright and airy, almost weightless.
• Silver (#C8E3D9): A whisper-light, dusty teal — the color of shallow lagoons.
• Slate Blue (#668DB9): A luminous, dusty blue — the color of deep harbor water.
• Teal (#006E7E): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Cocoa (#5A3C55): A deep, shadowed, dusty pink — the color of a candy shop window.

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

Use it as a design system

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

• Worn Hollow color palette (#F8F5EF, #CBE3D4, #4B93BA, #007170, #265147)
• Iris Chapel color palette (#F6F1EC, #BFE7D7, #6F8DC9, #116C66, #3C2330)
• Cobalt Meadow color palette (#FDF4E6, #A3D6F2, #0084D7, #00656F, #223E72)
• Tempered Orchard color palette (#FCF2F6, #D5DFFD, #7DA4EF, #338A82, #404662)
• Ancient Grove color palette (#E7DED1, #69ABB3, #006177, #003F36, #002334)
• Wandering Workshop color palette (#F8F7DC, #789452, #317FC3, #A93E59, #393831)
• Tempered Thicket color palette (#FDF4E5, #7DC6C9, #007B8F, #005747, #00384C)
• Hushed Olive Archive color palette (#F8F6E4, #96A963, #9C76BE, #5C6F00, #4C385F)

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