Cocoa Courtyard color palette — #FBF4EF · #DCDAD1 · #C1C0B4 · #B78164 · #6C3801

A conversation between Bronze and Caramel, giving this palette its sense of optimism and sophistication.

The five colors

• Ivory (#FBF4EF): bright and airy, almost weightless.
• Bone (#DCDAD1): bright and airy, almost weightless.
• Stone (#C1C0B4): soft and architectural.
• Caramel (#B78164): A luminous, dusty orange — the color of toasted spice.
• Bronze (#6C3801): A deep, shadowed, balanced gold — the color of old brass.

Feels like: Optimism, Sophistication, Softness, Clarity. Tagged scandi, muted, light.

Use it as a design system

One click turns Cocoa 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 Taupe Lagoon color palette (#F9F4EE, #D9DAD3, #AAB4AC, #AF9874, #575249)
• Patina Moss color palette (#F9F5E8, #D4DDCD, #B4C7AC, #8F8A29, #4E3E00)
• Timeworn Bronze color palette (#FAF4F0, #DBDBD3, #BDC1B4, #A95C39, #50453F)
• Basalt Harbor color palette (#EEE8DB, #A9A496, #8D8768, #524400, #0E0800)
• Amber Basin color palette (#F1E2CF, #BE8200, #644700, #322D27, #1D1711)
• Taupe Market color palette (#FFF4DD, #CEC6A8, #A7A57E, #688068, #34543F)
• Cypress Lantern color palette (#FFF4E1, #D6A771, #998444, #267355, #413C36)
• Timeworn Mustard Villa color palette (#FFF3E5, #FFD4BA, #FFC47C, #C0A948, #3D3833)

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