Tempered Cocoa color palette — #F8F1E2 · #B5AC84 · #807545 · #644600 · #262406

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

The five colors

• Cream (#F8F1E2): A whisper-light, dusty gold — the color of old brass.
• Sage (#B5AC84): A luminous, dusty green — the color of new leaves after rain.
• Walnut (#807545): A full-bodied, dusty green — the color of a quiet forest floor.
• Bronze (#644600): A full-bodied, balanced gold — the color of afternoon light on wheat.
• Onyx (#262406): 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

• Cocoa Thicket color palette (#FEEEE4, #C5A587, #996750, #78342D, #311E03)
• Fern Thicket color palette (#E7E0CC, #939F70, #6C6722, #4F3B00, #1A1900)
• Muted Canyon color palette (#E9FAEF, #9DAF80, #84721B, #6F4722, #294341)
• Tempered Amber color palette (#F5DCCA, #C27B29, #904100, #680C00, #1B1000)
• Charred Fern Loft color palette (#E9E1C7, #576A2E, #393900, #1F1700, #000200)
• Antique Corridor color palette (#F3DAC9, #986435, #702C00, #480102, #0A0400)
• Sunlit Meadow color palette (#FFECF5, #847DBB, #966D0D, #365F13, #28111E)
• Chestnut Workshop color palette (#FAEEF2, #8069A5, #775B00, #004824, #00150F)

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