Cocoa Pier color palette — #FFF2EE · #E5D8C8 · #F2BAA0 · #AA697C · #783A21

A conversation between Bronze and Mocha, giving this palette its sense of optimism and warmth.

The five colors

• Ivory (#FFF2EE): a clean, paper-quiet neutral.
• Bone (#E5D8C8): A whisper-light, dusty gold — the color of old brass.
• Sand (#F2BAA0): A whisper-light, dusty orange — the color of autumn markets.
• Mocha (#AA697C): A full-bodied, balanced red — the color of a theater curtain.
• Bronze (#783A21): A full-bodied, balanced orange — the color of autumn markets.

Feels like: Optimism, Warmth, Comfort, Sophistication, Softness, Clarity. Tagged pastel, light, muted, warm.

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

• Patina Ridge color palette (#FFF1F3, #E3D7D2, #E8B5B1, #8E6FAB, #5F4246)
• Cocoa Meadow color palette (#FFF2EA, #DEDBCC, #AFC7A4, #B07E72, #754309)
• Dusty Loft color palette (#FFF3E6, #B7A48B, #906A40, #714622, #413C36)
• Sunlit Brick color palette (#FFF2EE, #FFC0A1, #E99122, #C2092A, #672408)
• Antique Bronze color palette (#FFF3E6, #FFE1A9, #C8B038, #B05A00, #553C0D)
• Weathered Taupe Grove color palette (#FEEDD7, #D0C18E, #A2A554, #804A00, #433203)
• Pale Studio color palette (#FFE3D8, #E18A75, #C5661C, #73002D, #2E0200)
• Dusty Meadow color palette (#FAF4ED, #CFA67A, #757300, #865200, #2A240C)

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