Cocoa Harbor color palette — #FFF3E6 · #D4E0C7 · #ABB69C · #9B777B · #63433D

Cocoa and Mocha set the tone — five colors that lean into sophistication.

The five colors

• Cream (#FFF3E6): A whisper-light, dusty gold — the color of honey in a jar.
• Celadon Mist (#D4E0C7): A whisper-light, dusty green — the color of a quiet forest floor.
• Sage (#ABB69C): A luminous, dusty green — the color of new leaves after rain.
• Mocha (#9B777B): A luminous, dusty red — the color of late-summer berries.
• Cocoa (#63433D): A full-bodied, dusty orange — the color of toasted spice.

Feels like: Sophistication. Tagged vintage, retro, muted, light.

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

• Tempered Drift color palette (#DFFFE2, #99F6F0, #89BAA9, #966E61, #623D31)
• Lagoon Garden color palette (#DBF5E0, #9AC7B8, #5C9484, #655D73, #584254)
• Softworn Station color palette (#E9EAC6, #B1B69D, #7E916C, #466357, #1C423A)
• Tempered Chestnut Lagoon color palette (#E0FFDD, #93CEC7, #5F89A3, #7B4B39, #482508)
• Ancient Bronze Harbor color palette (#F5F6EB, #C1E8D2, #63ADAB, #A36540, #294100)
• Worn Turquoise Veranda color palette (#B3F2DA, #5DBDCF, #66739F, #58391C, #251000)
• Wisteria Field color palette (#F0FADE, #79D0A2, #D490C7, #BF779F, #272F16)
• Misty Lagoon Pier color palette (#FFF8BF, #A7E0AF, #1EA49D, #82495B, #531522)

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