Petrol Studio color palette — #ECF3F7 · #D7D6DF · #C5B8CD · #497D92 · #252D33

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

The five colors

• Ivory (#ECF3F7): a clean, paper-quiet neutral.
• Silver (#D7D6DF): bright and airy, almost weightless.
• Ash (#C5B8CD): A luminous, dusty violet — the color of a velvet chair.
• Slate (#497D92): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Onyx (#252D33): quiet, heavy and certain.

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

Use it as a design system

One click turns Petrol Studio 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 Ridge color palette (#EFF6FC, #D9D9E4, #C1BDCF, #577992, #3F4951)
• Washed Bloom color palette (#CFECF3, #A9C0DA, #8F759D, #466760, #1C3732)
• Muted Study color palette (#F1F1F8, #DFD2DB, #C6AEC5, #705691, #1E1F2B)
• Softworn Lagoon Cabin color palette (#E6F6F0, #89BFBD, #008780, #3E5771, #0E2D2C)
• Abyss Studio color palette (#E0EAF4, #99A0B0, #7B7797, #003A59, #00050C)
• Patina Cerulean color palette (#EFF8F3, #E4D3CF, #A8A191, #6697AD, #414A46)
• Cobalt Orchard color palette (#E4EDFB, #3E71CE, #2F2E47, #0D1623, #02070B)
• Aubergine Veranda color palette (#E3E3EB, #B8AFBE, #A1829A, #5F2375, #0A0817)

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