Cocoa Courtyard color palette — #FFF1F1 · #FEC1D6 · #EC9FAB · #BD7F7C · #7C421B

Bronze and Ballet Pink set the tone — five colors that lean into optimism and warmth.

The five colors

• Ivory (#FFF1F1): a clean, paper-quiet neutral.
• Carnation (#FEC1D6): A whisper-light, dusty rose — the color of strawberry cream.
• Ballet Pink (#EC9FAB): A luminous, balanced red — the color of late-summer berries.
• Dusty Rose (#BD7F7C): A luminous, dusty orange — the color of sun-warmed clay.
• Bronze (#7C421B): A full-bodied, balanced gold — the color of old brass.

Feels like: Optimism, Warmth, Comfort, Softness, Clarity. Tagged light, muted, warm.

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

• Amber Courtyard color palette (#F5F3FF, #EFD6D8, #EC9EA7, #BC6D54, #643E51)
• Worn Mallow color palette (#FFE6F1, #E3C2F9, #D4A3D5, #B484A5, #654442)
• Patina Delta color palette (#FFF2EC, #FCC4A7, #E3AB7C, #AD8A58, #6E4B00)
• Ancient Coral Archive color palette (#FFF2ED, #FFC3C3, #88D6DF, #E18E8F, #37553E)
• Frosted Coral color palette (#FFE9EB, #FFA1A2, #FF6446, #C95000, #633500)
• Worn Chestnut color palette (#FFF2ED, #DFDBCD, #DFB2AD, #A6B3CB, #7D451A)
• Ember Summit color palette (#FBDEDD, #FF8570, #E05C00, #9A5600, #452800)
• Weathered Canyon color palette (#FFF2ED, #FEB0A8, #9ACD9D, #9BAEDA, #48403D)

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