Tempered Cocoa color palette — #FFF1F4 · #EFD3D2 · #DD939D · #AD7360 · #6A3D00

A conversation between Bronze and Rosewood Mist, giving this palette its sense of optimism and warmth.

The five colors

• Ivory (#FFF1F4): bright and airy, almost weightless.
• Bone (#EFD3D2): A whisper-light, dusty orange — the color of sun-warmed clay.
• Rosewood Mist (#DD939D): A luminous, balanced red — the color of late-summer berries.
• Mocha (#AD7360): A luminous, dusty orange — the color of autumn markets.
• Bronze (#6A3D00): A full-bodied, balanced gold — the color of afternoon light on wheat.

Feels like: Optimism, Warmth, Comfort, Sophistication. Tagged light, muted, warm.

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

• Aged Stone Delta color palette (#FFF2EF, #E9D7C5, #E9AB82, #9B7F4C, #604D00)
• Dusty Station color palette (#FFF0FA, #E5D6E6, #D3A5DF, #A56A84, #633F37)
• Antique Orchard color palette (#FFE9DD, #D6D4E0, #A39592, #703C04, #261E18)
• Dusty Quarry color palette (#FFECEC, #E19BB3, #C25F71, #8D4B46, #3F3835)
• Worn Coral Market color palette (#F6EDFF, #FEC6D9, #F19FA8, #CD7771, #66475E)
• Gentle Ember color palette (#FFD1E4, #FF8591, #D35100, #674100, #261E00)
• Muted Coral color palette (#FFF2EF, #F5D3C8, #92D9E4, #CD808F, #2C4F37)
• Hushed Amber color palette (#FFF1F4, #FF9F95, #D2791B, #775100, #322E00)

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