Tempered Cocoa color palette — #FAF2F9 · #E7D7D6 · #9B7995 · #633933 · #211820

A conversation between Cocoa and Heather, giving this palette its sense of sophistication.

The five colors

• Ivory (#FAF2F9): a clean, paper-quiet neutral.
• Bone (#E7D7D6): bright and airy, almost weightless.
• Heather (#9B7995): A luminous, dusty pink — the color of neon signs at night.
• Cocoa (#633933): A deep, shadowed, dusty orange — the color of autumn markets.
• Onyx (#211820): A deep, shadowed, dusty pink — the color of peonies in June.

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

• Softworn Delta color palette (#F1F7F1, #B5E3EB, #728F6F, #334E32, #161E15)
• Coral Hollow color palette (#F9F3F9, #BBEBD3, #CF888C, #7C637D, #302831)
• Aged Stone color palette (#FDEEEA, #CCC68A, #825258, #412A24, #1A1210)
• Timeworn Cerulean Ridge color palette (#F6F3FF, #DFB2DD, #75BBC9, #5587B4, #332F3F)
• Hushed Bronze Station color palette (#EDF9F0, #F7E3B8, #8E722C, #483600, #031408)
• Aged Marigold color palette (#E5F2E6, #C89A39, #513600, #141B20, #0D0600)
• Weathered Ridge color palette (#FFF0F8, #FFCF95, #A94B00, #4E1E00, #13010B)
• Hushed Villa color palette (#FAF3F6, #D0D9DA, #CDA586, #98A0A7, #554A4E)

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