Cocoa Harbor color palette — #FFF2EF · #E1DBCF · #A5CDB5 · #977BA5 · #7A3B23

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

The five colors

• Ivory (#FFF2EF): bright and airy, almost weightless.
• Bone (#E1DBCF): bright and airy, almost weightless.
• Pistachio (#A5CDB5): A luminous, dusty teal — the color of sea glass.
• Heather (#977BA5): A luminous, dusty violet — the color of twilight just after sunset.
• Bronze (#7A3B23): A full-bodied, balanced orange — the color of autumn markets.

Feels like: Nature, Growth, Optimism, Sophistication, Softness, Clarity. Tagged pastel, light, muted.

Use it as a design system

One click turns Cocoa Harbor 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

• Softworn Study color palette (#FFF1F3, #E3DAD1, #A9AEB9, #8B87B4, #5E4A47)
• Aged Driftwood Bloom color palette (#FFF3E5, #D6E7CC, #9AD4CC, #B86A6A, #5F4900)
• Raspberry Thicket color palette (#FFF2EC, #FDD79D, #99C180, #B34993, #683D18)
• Aged Bronze color palette (#FDF4E8, #C1B79D, #A3763B, #7C5143, #4E4A00)
• Cocoa Veranda color palette (#FBF3EF, #CCC097, #80503E, #5B2800, #2A251B)
• Antique Garnet color palette (#F0DDC9, #92B46C, #00958D, #721C00, #1C1700)
• Washed Terracotta color palette (#FFF4DB, #BCE4A3, #00B3BE, #A03C00, #363D00)
• Rust Grove color palette (#FAF4EF, #DDB79F, #4C8D68, #AB4D1C, #2D2F28)

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