Softworn Cocoa color palette — #FAF4EE · #C8DFCC · #9EB88E · #748E73 · #584300

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

The five colors

• Ivory (#FAF4EE): bright and airy, almost weightless.
• Celadon Mist (#C8DFCC): A whisper-light, dusty teal — the color of sea glass.
• Sage (#9EB88E): A luminous, dusty green — the color of new leaves after rain.
• Eucalyptus (#748E73): A luminous, dusty green — the color of new leaves after rain.
• Deep Olive (#584300): 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 Softworn 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

• Patina Stone Thicket color palette (#F0F7F3, #C2E8D9, #A6BF95, #78A3A5, #3E524A)
• Taupe Coast color palette (#FCF3EE, #DDDFC1, #96A668, #936874, #3C3831)
• Patina Veranda color palette (#F5F1E9, #C1C999, #88873E, #536B2B, #33312A)
• Patina Orchard color palette (#FAF5E5, #CFD4AB, #349D88, #276A90, #282A08)
• Wandering Teal color palette (#F9F4EF, #C9DBE7, #E5BEDA, #3DA3A5, #5F454F)
• Fern Thicket color palette (#ECDED2, #9B8F42, #2C5B00, #441147, #010100)
• Weathered Aubergine color palette (#FFF2EB, #C09B68, #666300, #492473, #0E0600)
• Hushed Hollow color palette (#EAF9F4, #D4DDFA, #F3C185, #44A2E1, #5B401F)

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