Tempered Cocoa color palette — #F8F2E0 · #B3AC85 · #7C773F · #604807 · #24240D

Built around Bronze, softened by Walnut — the whole palette hums with nature and growth.

The five colors

• Cream (#F8F2E0): A whisper-light, dusty green — the color of a quiet forest floor.
• Sage (#B3AC85): A luminous, dusty green — the color of fresh herbs.
• Walnut (#7C773F): A full-bodied, dusty green — the color of a quiet forest floor.
• Bronze (#604807): A full-bodied, balanced gold — the color of old brass.
• Onyx (#24240D): A deep, shadowed, dusty green — the color of a quiet forest floor.

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

Use it as a design system

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

• Muted Hollow color palette (#FAF0E6, #C9B8A0, #9C7C5A, #754D38, #332B19)
• Softworn Bronze color palette (#E7FBEF, #99B085, #7F7422, #6C4922, #254343)
• Washed Delta color palette (#FCF5E2, #E0DFBF, #A6A06A, #86633B, #2A3800)
• Weathered Field color palette (#F1E7D0, #858B5D, #615500, #412D00, #081200)
• Wandering Hollow color palette (#EDDDD3, #B29175, #8D533D, #672525, #251400)
• Worn Cocoa color palette (#F4DDCD, #956631, #6B3100, #450900, #090400)
• Antique Studio color palette (#E7F6EE, #1E93B8, #A55D62, #6F4900, #002013)
• Muted Denim color palette (#EAF5EE, #C6B185, #005F73, #002D37, #021008)

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