Cocoa Harbor color palette — #D2E8D3 · #8DAF9F · #856983 · #743B40 · #3D2310

A conversation between Cocoa and Slate, giving this palette its sense of sophistication.

The five colors

• Celadon Mist (#D2E8D3): A whisper-light, dusty green — the color of a quiet forest floor.
• Sage (#8DAF9F): A luminous, dusty teal — the color of sea glass.
• Slate (#856983): A full-bodied, dusty pink — the color of neon signs at night.
• Cocoa (#743B40): A full-bodied, dusty red — the color of late-summer berries.
• Espresso (#3D2310): A deep, shadowed, dusty gold — the color of afternoon light on wheat.

Feels like: Sophistication. Tagged vintage, retro, 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

• Dusty Garnet Balcony color palette (#DAEBCE, #8DB398, #528174, #72394F, #3C1D0B)
• Tempered Cocoa color palette (#D4F1E7, #B59AAE, #8A6371, #664323, #372C11)
• Worn Chestnut Alley color palette (#D9FAE6, #95B9AF, #9A788C, #894C2A, #38332D)
• Muted Cabin color palette (#C3E6F0, #8AC2D6, #7A8FB7, #8A5A5A, #57404C)
• Softworn Cobalt color palette (#CCF3EC, #6BB0AB, #597CAA, #6A5530, #355239)
• Patina Bloom color palette (#F2DAE9, #AD8A92, #8E5574, #434000, #0B2204)
• Weathered Grape Villa color palette (#DCEEFC, #7D8FCE, #7552A2, #613400, #2C2200)
• Dusty Lantern color palette (#FCF6D5, #CDDFC3, #769ABB, #756F41, #38352E)

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