Cocoa Basin color palette — #FDF4E7 · #F9C2AF · #BCAF74 · #8285C1 · #683B00

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

The five colors

• Ivory (#FDF4E7): a clean, paper-quiet neutral.
• Wheat (#F9C2AF): A whisper-light, dusty orange — the color of autumn markets.
• Sage (#BCAF74): A luminous, dusty green — the color of new leaves after rain.
• Slate Blue (#8285C1): A luminous, balanced violet — the color of a velvet chair.
• Bronze (#683B00): A deep, shadowed, balanced gold — the color of afternoon light on wheat.

Feels like: Nature, Growth, Optimism, Creativity, Sophistication. Tagged retro, light, 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

• Dusty Lantern color palette (#FBF5E6, #F0C0D7, #D5A188, #5794B6, #5C4039)
• Tempered Hollow color palette (#FFF3E8, #E1CFA0, #8CBC91, #A878AE, #4A4841)
• Tempered Station color palette (#FDF4E5, #FFD59E, #B4A257, #448069, #433E38)
• Feathered Market color palette (#FFF3E6, #FFAB5A, #98B41A, #864BD6, #463200)
• Muted Bronze Coast color palette (#F9F0E5, #D5B077, #8C7B32, #734B00, #26201C)
• Pale Harbor color palette (#FFEAD9, #D8B472, #6FB361, #9B439E, #33302A)
• Teal Quarry color palette (#FAF4F0, #C6DEE9, #D9BBDC, #4CB5B4, #65485D)
• Muted Grape color palette (#F1DAC1, #DD9C2A, #6CA246, #7240A6, #2B2400)

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