Petrol Loft color palette — #F0F6FC · #A0C4EC · #8C70A0 · #4170A3 · #2C2C3C

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

The five colors

• Ivory (#F0F6FC): bright and airy, almost weightless.
• Sky (#A0C4EC): A luminous, dusty blue — the color of deep harbor water.
• Slate (#8C70A0): A full-bodied, dusty violet — the color of a velvet chair.
• Slate (#4170A3): A full-bodied, balanced blue — the color of open sky before noon.
• Onyx (#2C2C3C): A deep, shadowed, dusty violet — the color of wild irises.

Feels like: Trust, Stability, Creativity, Sophistication. Tagged duotone, muted.

Use it as a design system

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

• Tempered Petrol color palette (#ECF3F7, #A3C9E1, #AE6F6D, #007DA0, #1C121B)
• Antique Ash color palette (#E8FBEB, #9EA3D4, #896A90, #665830, #42465C)
• Aged Garnet color palette (#F1F5FF, #B9B6E5, #8E75A7, #704974, #6D2D56)
• Weathered Cerulean color palette (#F0F7F4, #AFDDC9, #C482B3, #3598C3, #3A292A)
• Washed Terrace color palette (#F2F5FC, #DCD8E0, #B5A9A9, #7182A4, #4F535A)
• Hushed Mulberry color palette (#F5F4FE, #C49FCF, #9E594A, #7B478A, #2D1F29)
• Dusty Chestnut Parlor color palette (#EFF6FE, #6787BF, #8F5136, #535413, #23363C)
• Soft Aubergine color palette (#E8E9FD, #8C5EB4, #7B0011, #48006F, #0D0000)

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