Petrol Field color palette — #EBF4F4 · #D6D8EC · #859EBF · #3E728F · #28364E

A conversation between Slate and Blue Fog, giving this palette its sense of trust and stability.

The five colors

• Ivory (#EBF4F4): bright and airy, almost weightless.
• Silver (#D6D8EC): A whisper-light, dusty violet — the color of a velvet chair.
• Blue Fog (#859EBF): A luminous, dusty blue — the color of open sky before noon.
• Slate (#3E728F): A full-bodied, dusty blue — the color of open sky before noon.
• Navy (#28364E): A deep, shadowed, dusty violet — the color of wild irises.

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

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

• Denim Station color palette (#E1F2F1, #7AA1C2, #12589E, #00364B, #000727)
• Petrol Boulevard color palette (#DDEDEB, #94B9CF, #00759D, #004A53, #001828)
• Cerulean Boulevard color palette (#E9F5F2, #BEE4EF, #3B9DA6, #186D61, #0E313E)
• Washed Petrol Quarry color palette (#F9F4EF, #CDE4E7, #8897C8, #007C8F, #644A56)
• Ash Market color palette (#F1F7F1, #DAD5DF, #C4BDE4, #649CA7, #464C66)
• Ancient Lagoon color palette (#D3E2DF, #408589, #00444C, #001F1D, #000202)
• Worn Pewter Orchard color palette (#F9EDFB, #DEA0A8, #8C99CC, #9E5B66, #23314B)
• Hushed Forest color palette (#E7F7E9, #A7C3AF, #6F8B74, #475F46, #213027)

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