Hushed Petrol color palette — #F0F7F4 · #D1DEE0 · #D4BCC3 · #3A7BA4 · #414A47

Slate and Stone set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#F0F7F4): bright and airy, almost weightless.
• Silver (#D1DEE0): bright and airy, almost weightless.
• Stone (#D4BCC3): A luminous, dusty rose — the color of a warm blush.
• Slate (#3A7BA4): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Charcoal (#414A47): quiet, heavy and certain.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

Use it as a design system

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

• Petrol Courtyard color palette (#EBF4F0, #DDD0CE, #C5B5B5, #4F7C92, #272E2B)
• Worn Station color palette (#FBF2F6, #E7D5D3, #D3B2BA, #6F57B0, #4B3A42)
• Driftwood Lantern color palette (#F9F3F7, #E1D7D8, #B2ACA2, #97768F, #575055)
• Aged Parlor color palette (#F3F7EE, #82BEAC, #008679, #47614B, #3C4635)
• Washed Navy Terrace color palette (#EEE7EF, #B6A2B4, #737DA5, #003868, #1C0E1E)
• Timeworn Ultramarine color palette (#FBF2FA, #E3CADC, #A0A1D4, #1D52B8, #3D2D3B)
• Tempered Cobalt color palette (#F0DEED, #476CC3, #45263C, #261A25, #110B0D)
• Iris Canyon color palette (#FFF0FE, #A9DCFF, #8FBEFF, #8487E3, #4C3749)

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