Tempered Cocoa color palette — #E7F6ED · #92B5A3 · #80754B · #5D4919 · #11281F

A conversation between Bronze and Walnut, giving this palette its sense of nature and growth.

The five colors

• Cream (#E7F6ED): bright and airy, almost weightless.
• Sage (#92B5A3): A luminous, dusty teal — the color of shallow lagoons.
• Walnut (#80754B): A full-bodied, dusty green — the color of fresh herbs.
• Bronze (#5D4919): A full-bodied, dusty gold — the color of afternoon light on wheat.
• Onyx (#11281F): A deep, shadowed, dusty teal — the color of shallow lagoons.

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

• Bronze Quarry color palette (#FEECF2, #95B694, #916D4A, #624051, #152819)
• Chestnut Harbor color palette (#D1E7D8, #A19A66, #73642C, #503A04, #001E13)
• Muted Bronze Bloom color palette (#FFEBF6, #C89DB2, #986852, #6B3F34, #311B24)
• Washed Terrace color palette (#FCF4E4, #C8BDA0, #9F8F51, #7F6527, #3F3D36)
• Softworn Ridge color palette (#F7EEFC, #DBA687, #7B3F54, #3E1927, #120816)
• Twilit Fern color palette (#F1F2D1, #5E6900, #3A3800, #1D1800, #010200)
• Chestnut Studio color palette (#F6D5E2, #734700, #402000, #1C0800, #020100)
• Amber Veranda color palette (#FFDFF0, #C9752D, #914000, #611B00, #1E0D00)

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