Cocoa Pier color palette — #FFF2EE · #E0D9CE · #A0B9A3 · #AB837C · #7D3E25
Bronze and Caramel set the tone — five colors that lean into optimism and sophistication.
The five colors
- Ivory (#FFF2EE): a clean, paper-quiet neutral.
- Bone (#E0D9CE): a clean, paper-quiet neutral.
- Sage (#A0B9A3): A luminous, dusty green — the color of a quiet forest floor.
- Caramel (#AB837C): A luminous, dusty orange — the color of toasted spice.
- Bronze (#7D3E25): A full-bodied, balanced orange — the color of toasted spice.
Feels like: Optimism, Sophistication, Softness, Clarity. Tagged pastel, light, 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
- Timeworn Terrace color palette (#FFEDEA, #E0D8C8, #B2B8C3, #AD80AB, #682D0D)
- Antique Bronze color palette (#FDF3E9, #C6B59E, #A4763B, #825119, #5E4200)
- Tempered Corridor color palette (#F5DABA, #BFA978, #908726, #763F00, #352200)
- Wandering Marigold color palette (#FFF2EB, #E5D9C2, #F2AC5E, #B55854, #683E2B)
- Tempered Ash color palette (#FCF1FF, #E7ECBE, #E9D6D9, #BA90B5, #5E4E5B)
- Bronze Veranda color palette (#FAF4EE, #DDB992, #8B7E36, #8C6436, #302E27)
- Ancient Garnet Ridge color palette (#FADFD4, #C4836D, #985E2C, #601427, #1A0100)
- Muted Amber color palette (#FFF2EA, #C17D5B, #73875F, #745078, #5F2E00)
Browse the whole catalog at Explore, or see today's palette.