Weathered Cocoa color palette — #FCF4E9 · #E3D8C2 · #C8B293 · #AB8B6C · #564600

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

The five colors

• Ivory (#FCF4E9): bright and airy, almost weightless.
• Bone (#E3D8C2): A whisper-light, dusty gold — the color of afternoon light on wheat.
• Stone (#C8B293): A luminous, dusty gold — the color of old brass.
• Caramel (#AB8B6C): A luminous, dusty gold — the color of honey in a jar.
• Deep Olive (#564600): A deep, shadowed, balanced green — the color of new leaves after rain.

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

Use it as a design system

One click turns Weathered 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

• Bronze Coast color palette (#F8E4D4, #DDBB93, #D08C5C, #AF614B, #34302A)
• Stone Coast color palette (#EFF8F0, #BBEBEA, #C6A97C, #906E82, #2F4440)
• Timeworn Amber color palette (#EEF8F0, #85D2D7, #D9A6B9, #CE8561, #2F4333)
• Aged Market color palette (#F2E7DD, #BA995F, #B06A00, #913E00, #1C1600)
• Feathered Mustard Studio color palette (#F7EED7, #C2D08F, #B3A739, #A17800, #253D0E)
• Timeworn Ridge color palette (#EAF5EB, #9DC7AD, #6E8C72, #6A4F59, #213029)
• Chestnut Workshop color palette (#FCEED4, #87843A, #745D00, #573800, #030400)
• Weathered Ash color palette (#F1F7F0, #F1DAB7, #6CABAB, #5B755B, #242F24)

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