Tempered Cocoa color palette — #FFF2ED · #CEC78B · #9B5F5C · #6B2E14 · #2C1E19

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

The five colors

• Ivory (#FFF2ED): bright and airy, almost weightless.
• Pistachio (#CEC78B): A whisper-light, dusty green — the color of fresh herbs.
• Walnut (#9B5F5C): A full-bodied, dusty orange — the color of autumn markets.
• Rust (#6B2E14): A deep, shadowed, balanced orange — the color of sun-warmed clay.
• Onyx (#2C1E19): A deep, shadowed, dusty orange — the color of autumn markets.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged luxury, dark, 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

• Antique Bronze color palette (#FCF3EC, #E1CFAB, #A5703C, #704000, #322A23)
• Dusty Meadow color palette (#FFF4E2, #DEB459, #856300, #4C3700, #261800)
• Aged Boulevard color palette (#FCF2FA, #EEE8AE, #A75E5B, #482E46, #150C14)
• Cocoa Boulevard color palette (#FBF2F8, #CDA0B0, #774032, #4C1E12, #2B1C27)
• Linen Moss Hollow color palette (#FDF3EE, #FAAEA0, #729E50, #BB6454, #26250E)
• Pale Corridor color palette (#FCDEC9, #C7A918, #923F00, #4D1E00, #1F0800)
• Washed Bronze color palette (#F2E1CD, #907000, #3E2500, #1B2018, #0B0400)
• Wandering Apricot color palette (#FFF3E4, #E0A273, #848C51, #5D5B97, #413C36)

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