Tempered Cocoa color palette — #F6F1E6 · #BCB48A · #627F55 · #7F4224 · #2D270B

Bronze takes the lead with Fern close behind in a set that reads as nature and growth at first glance.

The five colors

• Cream (#F6F1E6): a clean, paper-quiet neutral.
• Sage (#BCB48A): A luminous, dusty green — the color of fresh herbs.
• Fern (#627F55): A full-bodied, dusty green — the color of a quiet forest floor.
• Bronze (#7F4224): A full-bodied, balanced orange — the color of sun-warmed clay.
• Onyx (#2D270B): A deep, shadowed, dusty green — the color of a quiet forest floor.

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

• Hushed Cocoa Orchard color palette (#F7F2E3, #96A77B, #497047, #574400, #201D00)
• Patina Bronze color palette (#E8DDCE, #C1A35D, #877B0D, #525B00, #31312A)
• Misty Olive color palette (#F9F3CC, #B3C582, #708536, #334700, #121900)
• Cypress Ridge color palette (#EEF8F1, #88BCAF, #3E8366, #694E71, #2D4942)
• Washed Market color palette (#F6F2E0, #BDF3DF, #9DDBC3, #877646, #33332C)
• Hazy Iris color palette (#F8F2DE, #A8A867, #927FC9, #6A6900, #2A1E47)
• Powdered Cobalt color palette (#F8F2DA, #8A954C, #1789BE, #95526D, #241E02)
• Antique Lantern color palette (#EDF8F1, #A8CEC0, #7D9970, #94635D, #2E4940)

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