Cocoa Field color palette — #FDF2F1 · #E9CAB5 · #9D706C · #6A403D · #362725

A conversation between Cocoa and Mocha, giving this palette its sense of warmth and comfort.

The five colors

• Ivory (#FDF2F1): bright and airy, almost weightless.
• Wheat (#E9CAB5): A whisper-light, dusty gold — the color of honey in a jar.
• Mocha (#9D706C): A full-bodied, dusty orange — the color of autumn markets.
• Cocoa (#6A403D): A full-bodied, dusty orange — the color of autumn markets.
• Espresso (#362725): A deep, shadowed, dusty orange — the color of autumn markets.

Feels like: Warmth, Comfort, Sophistication. Tagged luxury, dark, muted, warm.

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

• Driftwood Villa color palette (#FAF2FD, #D7DACD, #AB7382, #4E4152, #1F1821)
• Softworn Villa color palette (#FCF3F0, #F4C5B7, #C28F65, #CD6975, #322D28)
• Ancient Dune color palette (#FCF2F3, #BCC697, #7B4B6F, #4D2F32, #2C231F)
• Washed Amber Workshop color palette (#EFDED3, #C18430, #712E00, #300F00, #070100)
• Tempered Straw Meadow color palette (#F6F3FD, #DEE4A0, #B78FB2, #6F697D, #2C2A32)
• Chalky Brick color palette (#FFF2EE, #EEAA74, #A8424D, #691825, #2B130C)
• Pine Summit color palette (#FDF4E7, #E5B193, #AD8C62, #487D49, #693B00)
• Hushed Bronze Market color palette (#FFF2EB, #F5C6B1, #CC966C, #9D6102, #644500)

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