Muted Cocoa color palette — #F9F4ED · #C7DFCC · #B7B084 · #9B7E77 · #574300

Deep Olive and Sage set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F9F4ED): a clean, paper-quiet neutral.
• Celadon Mist (#C7DFCC): A whisper-light, dusty teal — the color of sea glass.
• Sage (#B7B084): A luminous, dusty green — the color of fresh herbs.
• Mocha (#9B7E77): A luminous, dusty orange — the color of sun-warmed clay.
• Deep Olive (#574300): 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 Muted Cocoa 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

• Fern Hollow color palette (#FDF4E2, #D4E2CB, #C1C3CE, #C4AA8B, #5C5000)
• Aged Driftwood color palette (#F1F7F2, #A3CCB6, #7C875A, #715F73, #435149)
• Weathered Bronze Boulevard color palette (#F4F7E8, #C0E8D1, #69ACA4, #976D2F, #294100)
• Wandering Lagoon color palette (#FBF4E8, #D7E9B6, #BCC9FE, #AB995C, #5A3A52)
• Aqua Quarry color palette (#FEF4DE, #D7CD93, #76C8E2, #C191B0, #3B3831)
• Softworn Stone color palette (#FFF5D8, #CEEEC5, #B4B779, #6B6934, #312700)
• Powder Boulevard color palette (#F9F4EE, #C5DDE3, #A6C5EE, #649F96, #34554A)
• Softworn Station color palette (#FAF6E3, #A4C792, #3E8858, #6D4634, #0A1E00)

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