Cocoa Field color palette — #FFF3E9 · #DEDFC3 · #A7D2AA · #9C6756 · #6B4300

Bronze takes the lead with Walnut close behind in a set that reads as nature and growth at first glance.

The five colors

• Ivory (#FFF3E9): bright and airy, almost weightless.
• Celadon Mist (#DEDFC3): A whisper-light, dusty green — the color of new leaves after rain.
• Pistachio (#A7D2AA): A whisper-light, dusty green — the color of fresh herbs.
• Walnut (#9C6756): A full-bodied, dusty orange — the color of sun-warmed clay.
• Bronze (#6B4300): A full-bodied, balanced gold — the color of old brass.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged pastel, light, muted.

Use it as a design system

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

• Worn Study color palette (#FFF2EE, #E0D9CE, #E4C09D, #9A6D89, #783A20)
• Antique Driftwood Drift color palette (#FFEEE3, #DCDFBF, #A1D6B9, #AC6277, #342F29)
• Muted Moss color palette (#FFF4E1, #D4CF86, #72B04A, #8C4900, #473A00)
• Hushed Bronze Thicket color palette (#FFF2EA, #BEA185, #97654A, #73423A, #543600)
• Washed Orchard color palette (#F7F4CE, #94D29F, #53A89B, #726206, #34352E)
• Antique Mint Balcony color palette (#FEF6D0, #C0EDA6, #5FCAA1, #896800, #3A4D20)
• Weathered Blush Grove color palette (#FFF0F9, #CAF9F1, #A4E1DD, #CA8196, #62444F)
• Wandering Fern color palette (#F8F5EB, #B4B371, #00807A, #676300, #1B2819)

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