Cocoa Basin color palette — #F8F1E1 · #B3B886 · #6C7C4A · #804126 · #2C2712

A conversation between Bronze and Walnut, giving this palette its sense of nature and growth.

The five colors

• Cream (#F8F1E1): A whisper-light, dusty gold — the color of honey in a jar.
• Sage (#B3B886): A luminous, dusty green — the color of a quiet forest floor.
• Walnut (#6C7C4A): A full-bodied, dusty green — the color of new leaves after rain.
• Bronze (#804126): A full-bodied, balanced orange — the color of toasted spice.
• Onyx (#2C2712): A deep, shadowed, dusty green — the color of new leaves after rain.

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

Use it as a design system

One click turns Cocoa Basin 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 Bloom color palette (#F1F4E3, #93C09F, #478367, #415C4D, #252A16)
• Hazy Veranda color palette (#FFEEE4, #E2896A, #6D9D54, #91503A, #292905)
• Aged Lagoon Delta color palette (#FFF3E5, #CDC5A3, #6F9D73, #876677, #4F4200)
• Bronze Boulevard color palette (#FFEEE3, #DDD8C1, #C2C791, #AF6F4C, #342E2A)
• Apricot Dune color palette (#FFEEE2, #FCA97C, #B1643F, #683111, #250A00)
• Aged Fern color palette (#EDE4D3, #959146, #535B00, #522F14, #181100)
• Ember Dune color palette (#FFEEE3, #D9682D, #838520, #8F537E, #2C190C)
• Worn Cerulean Summit color palette (#F1F3E9, #C5E6CF, #369BB6, #1C6B6C, #103426)

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