Tempered Cocoa color palette — #FFF4E1 · #FFD4A9 · #B4A06D · #498063 · #583700

A conversation between Cocoa and Peach Cream, giving this palette its sense of nature and growth.

The five colors

• Cream (#FFF4E1): A whisper-light, dusty gold — the color of honey in a jar.
• Peach Cream (#FFD4A9): A whisper-light, dusty gold — the color of afternoon light on wheat.
• Camel (#B4A06D): A luminous, dusty gold — the color of afternoon light on wheat.
• Fern (#498063): A full-bodied, dusty teal — the color of glacier melt.
• Cocoa (#583700): A deep, shadowed, dusty gold — the color of old brass.

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

• Weathered Bronze color palette (#EBF9EE, #CA9E70, #8E742B, #33654C, #3F4C3F)
• Abyss Archive color palette (#FFF3E5, #DBDFC8, #BDC4B2, #868F7F, #435442)
• Timeworn Mustard color palette (#FFF4DC, #B9A228, #627400, #004A47, #151300)
• Hushed Field color palette (#FDF5D9, #BBD799, #68A273, #186E85, #32322B)
• Bronze Pier color palette (#E6F7E9, #D99989, #8B7734, #40507A, #37272E)
• Weathered Ridge color palette (#FDF4E7, #F8C1B8, #C5AB6D, #7B86C9, #4D4641)
• Chalky Pier color palette (#FFF4DE, #EDB602, #8D8B00, #00675A, #312700)
• Chestnut Station color palette (#FCF4EA, #D1A66C, #6F4E00, #322920, #130E0A)

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