Weathered Cocoa color palette — #FAF4EC · #E4CEA2 · #93794D · #684500 · #302A23

A conversation between Bronze and Walnut, giving this palette its sense of optimism and sophistication.

The five colors

• Ivory (#FAF4EC): bright and airy, almost weightless.
• Wheat (#E4CEA2): A whisper-light, dusty gold — the color of old brass.
• Walnut (#93794D): A full-bodied, dusty gold — the color of old brass.
• Bronze (#684500): A full-bodied, balanced gold — the color of afternoon light on wheat.
• Onyx (#302A23): quiet, heavy and certain.

Feels like: Optimism, Sophistication. Tagged luxury, dark, 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

• Softworn Pier color palette (#F4F7E9, #DBC18B, #567D59, #414700, #212315)
• Patina Driftwood color palette (#F0F8F0, #C9DCCA, #9F814D, #364D39, #151E16)
• Hushed Driftwood Ridge color palette (#F8F5EE, #DFD19E, #66AC8D, #A18B3A, #2C2F29)
• Patina Market color palette (#EFF8F0, #F0DCAB, #BA9862, #5A755C, #262E27)
• Timeworn Lagoon color palette (#F4E7D0, #936E00, #362A00, #1B221B, #090500)
• Softworn Fern color palette (#E4DEC7, #C1A057, #565A00, #292C00, #0F0B00)
• Fern Delta color palette (#FEF4E4, #B6C594, #6E9F86, #6F6891, #4B4B00)
• Worn Amber color palette (#F0F1DA, #B88A00, #275100, #0C2100, #030300)

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