Tempered Cocoa color palette — #E9F5EC · #8DB6A1 · #857345 · #6B4200 · #0E2820

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

The five colors

• Cream (#E9F5EC): bright and airy, almost weightless.
• Sage (#8DB6A1): A luminous, dusty teal — the color of glacier melt.
• Walnut (#857345): A full-bodied, dusty gold — the color of honey in a jar.
• Bronze (#6B4200): A full-bodied, balanced gold — the color of honey in a jar.
• Onyx (#0E2820): A deep, shadowed, dusty teal — the color of sea glass.

Feels like: 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

• Chestnut Canyon color palette (#D0E7D8, #76A490, #746423, #543800, #001E17)
• Bronze Delta color palette (#FCEDF4, #C59FAD, #9C6648, #6F3C32, #142817)
• Bronze Summit color palette (#FDF4E5, #A6AC7A, #896E34, #6F472F, #3E4100)
• Softworn Bronze color palette (#ECF9EF, #B9E9D6, #B29B69, #925C39, #143935)
• Weathered Archive color palette (#E6F6F2, #C6B184, #425F27, #1A2E05, #00100D)
• Hushed Delta color palette (#E0F5E3, #938747, #6D5000, #482800, #00130C)
• Patina Mulberry color palette (#E4F6F3, #69945C, #6E6BB1, #80315B, #00201C)
• Tempered Workshop color palette (#CBFBDF, #70C3B5, #00888A, #005362, #002739)

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