Cocoa Pier color palette — #F0E0E8 · #916A33 · #5F2B00 · #2B0001 · #020100

Cocoa takes the lead with Walnut close behind in a set that reads as optimism and sophistication at first glance.

The five colors

• Rose Water (#F0E0E8): A whisper-light, dusty rose — the color of pressed rose petals.
• Walnut (#916A33): A full-bodied, balanced gold — the color of old brass.
• Cocoa (#5F2B00): A deep, shadowed, balanced gold — the color of old brass.
• Ink (#2B0001): A deep, shadowed, dusty orange — the color of toasted spice.
• Black (#020100): quiet, heavy and certain.

Feels like: Optimism, Sophistication, Depth, Luxury, Grounding. Tagged earthy, warm, dark, 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

• Midnight Olive Delta color palette (#D3F0DB, #747827, #4A3A00, #1F0E00, #000200)
• Twilit Chestnut color palette (#F9DAC2, #7A4F00, #481E00, #290002, #050300)
• Washed Dune color palette (#FFEBDB, #A9733F, #924900, #6A2800, #070200)
• Cocoa Balcony color palette (#FAE9F4, #AD794C, #862A00, #450013, #020100)
• Patina Chestnut Delta color palette (#D4ECDD, #94A16A, #6F5F00, #472B00, #000600)
• Antique Pier color palette (#E6FCE6, #BFB37C, #9E6A00, #713100, #101500)
• Timeworn Garnet Harbor color palette (#F6E0FE, #AD4F8F, #790032, #230600, #020100)
• Aged Aubergine color palette (#E3E3F5, #9064AD, #662400, #41005E, #040002)

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