Petrol Loft color palette — #FAF3F7 · #B3BCF0 · #A16985 · #61689D · #3A2828

Slate and Mocha set the tone — five colors that lean into creativity and sophistication.

The five colors

• Ivory (#FAF3F7): bright and airy, almost weightless.
• Lavender (#B3BCF0): A luminous, dusty violet — the color of a velvet chair.
• Mocha (#A16985): A full-bodied, balanced rose — the color of a warm blush.
• Slate (#61689D): A full-bodied, balanced violet — the color of wild irises.
• Espresso (#3A2828): A deep, shadowed, dusty red — the color of a theater curtain.

Feels like: 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

• Petrol Bloom color palette (#EFF7F3, #94C9E2, #7875AF, #297696, #362931)
• Timeworn Cobalt Grove color palette (#F5F0F5, #A5C6F1, #B76969, #3D73B6, #20120D)
• Antique Lantern color palette (#FFF4E2, #B39BCF, #966681, #585E2A, #574146)
• Patina Atelier color palette (#F1F5FB, #B8D4F8, #C58793, #5F8DD3, #352937)
• Mulberry Workshop color palette (#FEF2F2, #D29BBB, #9E5B36, #894470, #302014)
• Driftwood Station color palette (#FBF2F6, #E0D8D5, #ADADA0, #9B7586, #595053)
• Ancient Alley color palette (#FFF1F4, #E5D8E7, #E4B5F4, #C27C8C, #593A3E)
• Ancient Driftwood color palette (#FFF0F8, #8180B4, #855E33, #3C552F, #23372D)

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