Cocoa Pier color palette — #FBF1DC · #B1AE82 · #807546 · #654600 · #292205

Built around Bronze, softened by Walnut — the whole palette hums with nature and growth.

The five colors

• Cream (#FBF1DC): A whisper-light, dusty gold — the color of old brass.
• Sage (#B1AE82): A luminous, dusty green — the color of a quiet forest floor.
• Walnut (#807546): A full-bodied, dusty green — the color of a quiet forest floor.
• Bronze (#654600): A full-bodied, balanced gold — the color of afternoon light on wheat.
• Onyx (#292205): A deep, shadowed, dusty green — the color of new leaves after rain.

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

Use it as a design system

One click turns Cocoa Pier 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 Alley color palette (#FFEDE9, #E1A385, #A86B3B, #653C00, #301E00)
• Patina Boulevard color palette (#E9DFCC, #A29A64, #73632E, #4F3A0B, #1E1700)
• Weathered Alley color palette (#EAFAEF, #8CB1A2, #7F7245, #72470F, #1D453F)
• Patina Bronze Basin color palette (#FCEEEB, #E19EA3, #A95F2F, #974852, #170B04)
• Pale Terracotta color palette (#F5E7DD, #C5783D, #933E00, #621900, #1E0D00)
• Timeworn Study color palette (#FBEEED, #DEA581, #7B3F53, #3F1B17, #150907)
• Fern Meadow color palette (#E8E2D1, #5F680D, #3B3800, #1D1800, #010200)
• Hushed Driftwood color palette (#FFEDEB, #B86A89, #906E3B, #414E82, #2B1110)

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