Tempered Cocoa color palette — #FBF3ED · #CCDDCC · #A2B786 · #9B7C85 · #5B4100

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

The five colors

• Ivory (#FBF3ED): a clean, paper-quiet neutral.
• Silver (#CCDDCC): A whisper-light, dusty green — the color of fresh herbs.
• Sage (#A2B786): A luminous, dusty green — the color of a quiet forest floor.
• Driftwood (#9B7C85): A luminous, dusty rose — the color of a warm blush.
• Bronze (#5B4100): A deep, shadowed, balanced gold — the color of old brass.

Feels like: Nature, Growth, Optimism, Sophistication, Grounding. Tagged botanical, earthy, muted, light.

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

• Hushed Orchard color palette (#F7F5EE, #BBE3DA, #7DBCB3, #6C8E84, #434C00)
• Hushed Jade color palette (#FCF3EB, #D8E3BD, #83AB72, #8D6B7B, #3B3831)
• Worn Bone Ridge color palette (#EEF8F1, #DEE3B2, #A9BE95, #8B9DAA, #40524A)
• Ancient Bloom color palette (#F1F7F0, #ABC9B9, #608B81, #5E6678, #3E5348)
• Antique Powder color palette (#FFF1F5, #E4D9D2, #ADC3EB, #A0B1AF, #5D494D)
• Sunflower Corridor color palette (#FFF1F3, #FFD6FC, #C7D57D, #BD82BB, #48463F)
• Tempered Driftwood Lagoon color palette (#F4F2EA, #C8C5A9, #88873E, #556752, #32312A)
• Wandering Lagoon color palette (#FCF5E4, #BBDBAD, #19A180, #825363, #292A0C)

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