Tempered Cocoa color palette — #EDF9EF · #8AB1A1 · #866F40 · #774222 · #204440

Bronze takes the lead with Walnut close behind in a set that reads as optimism and sophistication at first glance.

The five colors

• Ivory (#EDF9EF): bright and airy, almost weightless.
• Sage (#8AB1A1): A luminous, dusty teal — the color of shallow lagoons.
• Walnut (#866F40): A full-bodied, dusty gold — the color of honey in a jar.
• Bronze (#774222): A full-bodied, balanced gold — the color of honey in a jar.
• Forest (#204440): 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

• Dusty Cocoa Station color palette (#DFECE0, #75A28E, #7E5D22, #693217, #043932)
• Antique Pewter color palette (#FCF2F7, #AABEAA, #A07560, #7E4E53, #394D43)
• Timeworn Cocoa Chapel color palette (#FBF0DF, #B4AD81, #8C7134, #6C4100, #27230E)
• Muted Garnet Canyon color palette (#FFE7F1, #B39960, #97571F, #802326, #353900)
• Quiet Lantern color palette (#FDE5FF, #D593AC, #A95F43, #6F4B00, #424400)
• Garnet Summit color palette (#F4DAE2, #92885B, #784A00, #661500, #1C2900)
• Muted Mulberry color palette (#F6F3FD, #CF9BC3, #876C00, #992687, #17291D)
• Muted Bronze color palette (#FFF1F5, #AE7229, #77691B, #00633E, #442A33)

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