Cocoa Atelier color palette — #FCF3ED · #DFE0CC · #B6AF88 · #778E6D · #5D4000

Bronze and Eucalyptus set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#FCF3ED): bright and airy, almost weightless.
• Bone (#DFE0CC): A whisper-light, dusty green — the color of new leaves after rain.
• Sage (#B6AF88): A luminous, dusty green — the color of fresh herbs.
• Eucalyptus (#778E6D): A luminous, dusty green — the color of fresh herbs.
• Bronze (#5D4000): A deep, shadowed, balanced gold — the color of old brass.

Feels like: Nature, Growth, Optimism, Sophistication, Grounding. Tagged botanical, earthy, muted, light.

Use it as a design system

One click turns Cocoa Atelier 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 Hollow color palette (#F7F5ED, #C0E0DA, #7CBCB6, #95863D, #404D00)
• Tempered Lagoon color palette (#FCF2F7, #A8CBB2, #5B8D7F, #516B70, #435147)
• Driftwood Quarry color palette (#F7F1E7, #D0C29E, #90843B, #5B6923, #33312A)
• Dusty Seafoam color palette (#E7FBF1, #E6D6D0, #84CFC8, #A6A59A, #564958)
• Weathered Aubergine Lagoon color palette (#EFDDD1, #A78A47, #475500, #3F1052, #020100)
• Wandering Teal color palette (#F8F5EB, #C6E8CC, #5AAFA6, #527A9F, #343E00)
• Dusty Teal color palette (#FAF4F0, #C8DCE5, #C2BDEB, #47A497, #5D4552)
• Pine Thicket color palette (#FDF4E8, #B7C18F, #308A50, #005B69, #171B00)

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