Cocoa Terrace color palette — #F7F6EB · #8DA071 · #367F71 · #794236 · #514017

Coffee and Teal set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F7F6EB): a clean, paper-quiet neutral.
• Moss (#8DA071): A luminous, dusty green — the color of fresh herbs.
• Teal (#367F71): A full-bodied, dusty teal — the color of sea glass.
• Coffee (#794236): A full-bodied, dusty orange — the color of autumn markets.
• Deep Olive (#514017): A deep, shadowed, dusty gold — the color of old brass.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged muted.

Use it as a design system

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

• Teal Coast color palette (#F2F7EB, #60A988, #337B8C, #40527E, #4C4300)
• Tempered Taupe Pier color palette (#F8F5EA, #969E65, #477E62, #005F68, #503953)
• Pewter Atelier color palette (#ECF8F5, #A2BA90, #5C9A88, #79569D, #563E11)
• Washed Archive color palette (#F7F1E5, #AB9C62, #337A9B, #753444, #3F1922)
• Weathered Lagoon color palette (#F1FBD3, #8EC7A8, #4C9D80, #1B6E5B, #42543A)
• Driftwood Thicket color palette (#F0F9E6, #BDCBB8, #809984, #80697C, #614756)
• Muted Driftwood color palette (#F8F5EE, #C9C1A3, #8D8339, #7C6217, #5C4C00)
• Hushed Ash Studio color palette (#F4F6EF, #CAE2E2, #759FBB, #537962, #325249)

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