Weathered Cocoa color palette — #F9F0E4 · #9BA672 · #41714F · #5F3F00 · #221C00

Bronze takes the lead with Pine close behind in a set that reads as nature and growth at first glance.

The five colors

• Cream (#F9F0E4): a clean, paper-quiet neutral.
• Sage (#9BA672): A luminous, dusty green — the color of new leaves after rain.
• Pine (#41714F): A full-bodied, dusty teal — the color of glacier melt.
• Bronze (#5F3F00): A deep, shadowed, balanced gold — the color of afternoon light on wheat.
• Onyx (#221C00): A deep, shadowed, dusty green — the color of new leaves after rain.

Feels like: Nature, Growth, Optimism, Sophistication, Grounding. Tagged botanical, earthy, 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 Canyon color palette (#F3F3E6, #7AAD96, #007378, #3D4C28, #162007)
• Antique Fern color palette (#FAF5E8, #A39C74, #496F37, #574B00, #37362F)
• Patina Boulevard color palette (#FFEFDC, #A9AD71, #3E7B44, #00575F, #212300)
• Ancient Emerald color palette (#E8FAEF, #CBD7A4, #6F975B, #6C643A, #023024)
• Forest Meadow color palette (#ECE4D7, #829752, #00663D, #00404E, #151200)
• Timeworn Olive Parlor color palette (#F5EAD7, #688346, #005136, #352800, #040A00)
• Ancient Courtyard color palette (#BBFCF8, #37B8B5, #007871, #003A3A, #000D0D)
• Olive Dune color palette (#EBF7DE, #A4E6FA, #AEB3E4, #5C7742, #142E1C)

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