Petrol Courtyard color palette — #EFF6FC · #D8DAE5 · #C0BDCE · #547992 · #404950

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

The five colors

• Ivory (#EFF6FC): a clean, paper-quiet neutral.
• Silver (#D8DAE5): bright and airy, almost weightless.
• Stone (#C0BDCE): A luminous, dusty violet — the color of a velvet chair.
• Slate (#547992): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal (#404950): a grounded near-black with real depth.

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

Use it as a design system

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

• Wandering Petrol color palette (#ECF3F8, #D6D6E1, #BEBAC7, #417E96, #262D32)
• Cerulean Basin color palette (#EFF7F3, #DFD4D2, #A9A093, #5B99B2, #404A45)
• Wandering Study color palette (#EEF6FF, #A3B3D6, #8683A9, #725963, #395144)
• Hushed Market color palette (#E4ECF4, #9CAABE, #757F98, #003B5C, #081520)
• Cypress Thicket color palette (#EAF9F6, #83BFA1, #328375, #415F6C, #2E4848)
• Softworn Denim Pier color palette (#EFF6FE, #C4D3EF, #9DA5C7, #005BA6, #263444)
• Sky Market color palette (#EEF6FF, #80EAFF, #74BBFF, #8876B4, #2F3D51)
• Aubergine Parlor color palette (#E2E2EA, #BCB5C6, #9A85A3, #5F2A6E, #1F1D29)

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