Cocoa Ridge color palette — #FAF4ED · #C8DFCD · #A1B78E · #9A7B90 · #574400

Deep Olive takes the lead with Sage close behind in a set that reads as nature and growth at first glance.

The five colors

• Ivory (#FAF4ED): a clean, paper-quiet neutral.
• Celadon Mist (#C8DFCD): A whisper-light, dusty teal — the color of shallow lagoons.
• Sage (#A1B78E): A luminous, dusty green — the color of fresh herbs.
• Heather (#9A7B90): A luminous, dusty pink — the color of a candy shop window.
• Deep Olive (#574400): A deep, shadowed, balanced green — the color of a quiet forest floor.

Feels like: Nature, Growth, Optimism, Sophistication, Grounding. Tagged botanical, earthy, muted, light.

Use it as a design system

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

• Aged Taupe color palette (#FAF4ED, #D8E2C1, #8DA96D, #71729A, #3B3831)
• Washed Harbor color palette (#EFF7F4, #BFE8DC, #A0C191, #84A0A7, #3C534C)
• Wisteria Delta color palette (#FEF1F4, #F6D3C9, #BBD799, #BE7EC7, #47473F)
• Patina Courtyard color palette (#EFF8F0, #C3C595, #6F8A62, #5F6578, #42514A)
• Tempered Dune color palette (#FFF1F3, #E3D8D2, #ABA7DC, #A3B2AE, #614D4D)
• Pewter Chapel color palette (#F9F6E5, #B4DCB7, #509A85, #7B5183, #262B0F)
• Aged Aubergine color palette (#EAE0CF, #8C9459, #1C630E, #2D0167, #010100)
• Tempered Fern color palette (#FFF3E5, #B0A358, #4D6B00, #392E74, #0A0700)

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