Tempered Cocoa color palette — #FAF4EE · #E0D1A1 · #9D7444 · #6C4300 · #302A23

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

The five colors

• Ivory (#FAF4EE): bright and airy, almost weightless.
• Wheat (#E0D1A1): A whisper-light, dusty green — the color of a quiet forest floor.
• Walnut (#9D7444): A full-bodied, balanced gold — the color of honey in a jar.
• Bronze (#6C4300): A full-bodied, balanced gold — the color of old brass.
• Onyx (#302A23): quiet, heavy and certain.

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

• Bronze Alley color palette (#FBF4EC, #F3DBB0, #B29A7B, #8E6325, #322A20)
• Weathered Driftwood color palette (#EFF8EE, #B6E2ED, #9F7F59, #384D36, #161E15)
• Teal Corridor color palette (#F9F4EF, #F7C798, #35B296, #B18150, #2A3026)
• Aged Villa color palette (#F4F7EC, #ECB79A, #428255, #3D4800, #212319)
• Hushed Bronze Delta color palette (#EEE2D1, #936E00, #392800, #1B211A, #0A0500)
• Muted Thicket color palette (#FBF5E7, #ECAE3A, #7A6800, #453A00, #241900)
• Apricot Alley color palette (#E3DECB, #D1984E, #585A00, #2A2B00, #0F0B00)
• Weathered Teal color palette (#FFF2EC, #D3BC79, #4FA586, #826187, #494841)

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