Tempered Cocoa color palette — #F8EFF6 · #CBB078 · #7F3F3C · #371C35 · #130812

Coffee and Sand set the tone — five colors that lean into optimism and sophistication.

The five colors

• Blush (#F8EFF6): bright and airy, almost weightless.
• Sand (#CBB078): A luminous, dusty gold — the color of afternoon light on wheat.
• Coffee (#7F3F3C): A full-bodied, balanced orange — the color of toasted spice.
• Deep Indigo (#371C35): A deep, shadowed, dusty pink — the color of peonies in June.
• Ink (#130812): A deep, shadowed, dusty pink — the color of peonies in June.

Feels like: 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

• Worn Harbor color palette (#FFF2EF, #A3B879, #7A3948, #45231C, #24190F)
• Dusty Chestnut Chapel color palette (#EAF6E9, #C9B07C, #734B0D, #392200, #060F05)
• Muted Atelier color palette (#FFF2ED, #E5BF6C, #98605C, #6B2E13, #291F1B)
• Antique Olive Lantern color palette (#F8EFF4, #F1997E, #737D00, #9D472B, #03120C)
• Hushed Amber color palette (#EFD6E4, #BB8C00, #672800, #290B00, #090005)
• Bronze Loft color palette (#F7EFF2, #C9D7D9, #A5C3C0, #976944, #312A2D)
• Hushed Pewter color palette (#FAF2FB, #D9F0B0, #A65D6B, #452F4A, #150C16)
• Washed Bronze Studio color palette (#FFEDE2, #D5A86C, #8E7000, #515000, #1D2A00)

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