Cocoa Field color palette — #FFF1F2 · #FFC3E0 · #EBA4BD · #BE828A · #7B3D21

A conversation between Bronze and Ballet Pink, giving this palette its sense of optimism and warmth.

The five colors

• Ivory (#FFF1F2): bright and airy, almost weightless.
• Thistle (#FFC3E0): A whisper-light, dusty rose — the color of strawberry cream.
• Ballet Pink (#EBA4BD): A luminous, balanced rose — the color of strawberry cream.
• Dusty Rose (#BE828A): A luminous, dusty red — the color of a theater curtain.
• Bronze (#7B3D21): A full-bodied, balanced orange — the color of sun-warmed clay.

Feels like: Optimism, Warmth, Comfort, Softness, Clarity. Tagged light, 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

• Stone Veranda color palette (#FFF2EF, #FFC3C4, #EFA79D, #C0876C, #58524D)
• Mallow Market color palette (#FFF0F9, #DFCEFF, #CCA7E0, #A47AA8, #664145)
• Tempered Peony color palette (#F4EFFF, #D99CC0, #C36B8A, #894953, #432C3F)
• Aged Seafoam Studio color palette (#FFF2EF, #FFC2CD, #82D9D3, #D692A0, #3C5539)
• Worn Cocoa color palette (#FFF2EE, #E0D9CF, #D4AEAC, #A3B9D3, #7F4223)
• Ancient Coral color palette (#F5DCE5, #FFA1B0, #FC6060, #CF4E2B, #6B2B04)
• Shell Archive color palette (#FFF2EE, #FFADB5, #A7CA8F, #91B2D8, #553B34)
• Ember Boulevard color palette (#FCD3DC, #FF8083, #E75D44, #AF4500, #442200)

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