Petrol Courtyard color palette — #F0F7F2 · #D3DCDC · #CCBBC1 · #348090 · #424A45

Slate and Stone set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#F0F7F2): bright and airy, almost weightless.
• Silver (#D3DCDC): bright and airy, almost weightless.
• Stone (#CCBBC1): A luminous, dusty rose — the color of strawberry cream.
• Slate (#348090): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal (#424A45): a grounded near-black with real depth.

Feels like: Trust, Stability, 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

• Washed Harbor color palette (#EEF4EF, #CFDADC, #CDBBBC, #008493, #272E29)
• Softworn Sapphire color palette (#FCF1FA, #ECD3D3, #CFB3BC, #4963BB, #4A3A47)
• Washed Denim color palette (#E9FAF3, #DECCDE, #B89DB0, #00628B, #193A2F)
• Fern Basin color palette (#F7F6E5, #95BB97, #468167, #4C604C, #414700)
• Worn Turquoise Archive color palette (#EFF6FA, #D7DBE6, #B9AFBE, #60BACE, #3D4A50)
• Antique Abyss Alley color palette (#DEEDE5, #96B0A8, #91758D, #003E50, #061810)
• Hushed Studio color palette (#D2EBE3, #0078B6, #3E2B3B, #10231E, #050F0E)
• Ancient Chestnut Courtyard color palette (#DBFFED, #C1A6BF, #9D7B8C, #865021, #4B4B00)

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