Tempered Cocoa color palette — #FAF4F0 · #D1BEA3 · #808657 · #7D5B66 · #684500

Bronze and Driftwood set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#FAF4F0): bright and airy, almost weightless.
• Sand (#D1BEA3): A luminous, dusty gold — the color of afternoon light on wheat.
• Driftwood (#808657): A luminous, dusty green — the color of a quiet forest floor.
• Graphite (#7D5B66): A full-bodied, dusty rose — the color of a warm blush.
• Bronze (#684500): A full-bodied, balanced gold — the color of afternoon light on wheat.

Feels like: Nature, Growth, Optimism, Sophistication, Grounding. Tagged botanical, earthy, 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

• Dusty Driftwood Boulevard color palette (#FAF4EC, #C5C2A5, #758A48, #4B6F5C, #564F00)
• Cypress Meadow color palette (#F8F5EB, #AFB394, #2C8471, #7D4851, #434600)
• Weathered Orchard color palette (#EBF5ED, #ABCCBA, #7B8B4F, #4D6573, #26352D)
• Aged Cerulean color palette (#FFF1F6, #E4D9D3, #D1C4A5, #6786B5, #624D4E)
• Worn Violet Harbor color palette (#FFF1F5, #BEA3D4, #94A066, #8A5AAC, #4F4D46)
• Antique Delta color palette (#FAF4EF, #CEE3E5, #8898C4, #007F7E, #674856)
• Charred Harbor color palette (#F2DCCB, #6E5C18, #203100, #270033, #080500)
• Hushed Cypress Balcony color palette (#FDF4E6, #93A273, #2D724D, #6D3651, #36362F)

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