Petrol Field color palette — #F0F6FD · #DCD9E3 · #C5BCC7 · #5F7692 · #424850

A conversation between Slate and Stone, giving this palette its sense of sophistication.

The five colors

• Ivory (#F0F6FD): a clean, paper-quiet neutral.
• Silver (#DCD9E3): a clean, paper-quiet neutral.
• Stone (#C5BCC7): soft and architectural.
• Slate (#5F7692): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#424850): quiet, heavy and certain.

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

Use it as a design system

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

• Weathered Pewter Villa color palette (#F6F3FD, #E6D4DC, #C2ACBC, #805178, #3C3845)
• Muted Ash Villa color palette (#EEF6FF, #B4A8D3, #8B7F9B, #4B716E, #3F565D)
• Antique Lantern color palette (#E3EBF7, #A4A8BD, #807A99, #1D326D, #0C1420)
• Washed Station color palette (#EEEAF3, #C1B4C2, #A28496, #6A2853, #221C29)
• Washed Nightshade color palette (#F1F5FF, #CECFF2, #AC9FC3, #4A4EA5, #2A3247)
• Hushed Stone color palette (#EEF8F0, #ADB679, #5C7E57, #53596E, #2F493F)
• Hushed Powder Lagoon color palette (#F1F5FF, #A6DCFF, #A8ACFF, #BD7AA2, #373B54)
• Indigo Corridor color palette (#DFE4F4, #6D59D3, #332D48, #1A1E2C, #0C0C12)

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