Cocoa Villa color palette — #F1D9E0 · #9D8249 · #6C4300 · #381600 · #020100

Bronze takes the lead with Caramel close behind in a set that reads as optimism and sophistication at first glance.

The five colors

• Shell Pink (#F1D9E0): A whisper-light, dusty rose — the color of strawberry cream.
• Caramel (#9D8249): A luminous, balanced gold — the color of honey in a jar.
• Bronze (#6C4300): A full-bodied, balanced gold — the color of old brass.
• Espresso (#381600): A deep, shadowed, dusty gold — the color of old brass.
• Black (#020100): quiet, heavy and certain.

Feels like: Optimism, Sophistication, Grounding. Tagged earthy, warm, muted.

Use it as a design system

One click turns Cocoa Villa 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

• Softworn Bloom color palette (#D5EBE0, #79913E, #525000, #2B2000, #000200)
• Weathered Chestnut color palette (#FFDAE6, #B19663, #875100, #522100, #050400)
• Softworn Studio color palette (#E2FEE6, #D2BA58, #A37500, #713F00, #191A00)
• Garnet Orchard color palette (#FFF0F9, #D7A780, #A76241, #801B19, #1C0F00)
• Softworn Lagoon color palette (#FDD6E5, #D75273, #931700, #301000, #020100)
• Dusty Courtyard color palette (#FFF1F7, #E4C198, #BA7848, #8B3E26, #0C2815)
• Worn Mulberry Meadow color palette (#E9E4F5, #97258F, #495400, #003028, #030003)
• Twilit Aubergine Thicket color palette (#DFDCEC, #AF8726, #490050, #1B070F, #030004)

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