Tempered Cocoa color palette — #FFF2EE · #DD999E · #7F4124 · #3A251F · #160D0B

Bronze and Rosewood Mist set the tone — five colors that lean into optimism and sophistication.

The five colors

• Ivory (#FFF2EE): a clean, paper-quiet neutral.
• Rosewood Mist (#DD999E): A luminous, balanced red — the color of embers at dusk.
• Bronze (#7F4124): A full-bodied, balanced orange — the color of autumn markets.
• Espresso (#3A251F): A deep, shadowed, dusty orange — the color of sun-warmed clay.
• Ink (#160D0B): quiet, heavy and certain.

Feels like: Optimism, Sophistication. Tagged noir, dark, luxury, 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 Harbor color palette (#FFEEE9, #ED9DA7, #A66C40, #61504C, #271F20)
• Amber Field color palette (#FEF4E6, #C19647, #5A4200, #2A1B04, #090401)
• Inked Harbor color palette (#EADCCD, #855300, #263230, #1A1000, #020100)
• Dusty Ember color palette (#FFF2EB, #F65120, #56311C, #270C00, #050100)
• Washed Rose Atelier color palette (#F5E9F7, #C8596C, #4A3440, #231B24, #0D0B10)
• Shadow Terrace color palette (#FCE3D8, #75000E, #2A281A, #130702, #040000)
• Moonless Rust Boulevard color palette (#FAE0CE, #BD5200, #391C00, #0D140C, #0A0200)
• Timeworn Blush color palette (#FFF2EA, #F7BDA2, #BDC178, #D086B9, #3D3733)

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