Cocoa Harbor color palette — #F9F5EB · #DDE2CA · #8E884E · #574400 · #1F1B10

A conversation between Deep Olive and Moss, giving this palette its sense of nature and growth.

The five colors

• Ivory (#F9F5EB): bright and airy, almost weightless.
• Celadon Mist (#DDE2CA): A whisper-light, dusty green — the color of new leaves after rain.
• Moss (#8E884E): A luminous, dusty green — the color of fresh herbs.
• Deep Olive (#574400): A deep, shadowed, balanced green — the color of a quiet forest floor.
• Onyx (#1F1B10): A deep, shadowed, dusty green — the color of fresh herbs.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged luxury, dark, 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

• Ancient Bronze color palette (#F8F5EB, #FFD6A1, #A0A36E, #7F6B21, #2F2B20)
• Timeworn Marigold Study color palette (#E9F2DA, #CB990D, #00482C, #1D292C, #000B04)
• Antique Lagoon Study color palette (#F1F8EA, #FFE2A5, #2E886E, #004333, #0D1108)
• Pewter Study color palette (#EAF5EF, #DABF95, #666433, #1F372C, #0D1612)
• Eclipse Loft color palette (#ECE8D8, #9A7300, #1B1E00, #090C06, #010100)
• Patina Teal color palette (#F6F5EF, #CDFED4, #3FC6B5, #94A34E, #1A2018)
• Hushed Mustard Grove color palette (#F9F5E8, #C5C97D, #8EB0E5, #9573A3, #33322B)
• Hushed Fern Study color palette (#F6F7E7, #DCB55F, #286000, #081E00, #010100)

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