Cocoa Harbor color palette — #FFF2EA · #DFC6AC · #B7937B · #906A5E · #5F4200

Bronze and Taupe set the tone — five colors that lean into optimism and warmth.

The five colors

• Ivory (#FFF2EA): a clean, paper-quiet neutral.
• Oat (#DFC6AC): A whisper-light, dusty gold — the color of old brass.
• Taupe (#B7937B): A luminous, dusty gold — the color of old brass.
• Walnut (#906A5E): A full-bodied, dusty orange — the color of autumn markets.
• Bronze (#5F4200): A full-bodied, balanced gold — the color of old brass.

Feels like: Optimism, Warmth, Comfort, Sophistication, Grounding. Tagged earthy, warm, 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

• Wandering Coast color palette (#FDF3EC, #EED4BE, #DEA88F, #B18872, #683C00)
• Cocoa Thicket color palette (#FAF4EA, #E7CDA5, #8C7C50, #654700, #302B20)
• Stone Delta color palette (#FFF0F9, #ECD3D0, #D5A08A, #8C6F8C, #354438)
• Pale Bronze color palette (#FEECD6, #AF9F56, #956717, #703E21, #212800)
• Taupe Pier color palette (#FEF3E5, #C8A56B, #9C93C6, #8B6D9B, #543600)
• Muted Chestnut Veranda color palette (#FFF0F8, #CCAEBC, #997389, #804F41, #583F49)
• Cocoa Market color palette (#F0DACF, #A27331, #833B00, #5B0F12, #0F0B00)
• Airy Amber Courtyard color palette (#FEEBD7, #D2B05D, #BA741E, #964528, #38380A)

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