Tempered Cocoa color palette — #FFF4E1 · #A5AD78 · #837044 · #77430F · #3D4100

Bronze and Deep Olive set the tone — five colors that lean into nature and growth.

The five colors

• Cream (#FFF4E1): A whisper-light, dusty gold — the color of honey in a jar.
• Sage (#A5AD78): A luminous, dusty green — the color of a quiet forest floor.
• Walnut (#837044): A full-bodied, dusty gold — the color of afternoon light on wheat.
• Bronze (#77430F): A full-bodied, balanced gold — the color of old brass.
• Deep Olive (#3D4100): A deep, shadowed, balanced green — the color of a quiet forest floor.

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

• Timeworn Loft color palette (#FFF2EB, #CA9D6F, #986352, #6B4741, #403D36)
• Patina Corridor color palette (#F2E7CF, #8CA05C, #76620D, #603915, #30312A)
• Timeworn Meadow color palette (#E2F9E9, #B4AD7E, #588066, #35553C, #0D291E)
• Taupe Thicket color palette (#EAFAEE, #B2DBCA, #C0AA6F, #A77F59, #27443E)
• Softworn Corridor color palette (#E8FBEB, #00929D, #A35A3F, #79422D, #28372B)
• Terracotta Atelier color palette (#FCD5BF, #C47A00, #9C3300, #6A1933, #312800)
• Washed Studio color palette (#E4E3C7, #54862D, #4C4700, #3A2200, #001C10)
• Smoked Chestnut Balcony color palette (#F8E0CB, #6E5600, #432200, #290001, #040300)

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