Cocoa Ridge color palette — #FAF4EC · #C5E1CC · #9DB88B · #977D8D · #564400

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 (#FAF4EC): bright and airy, almost weightless.
• Celadon Mist (#C5E1CC): A whisper-light, dusty teal — the color of sea glass.
• Sage (#9DB88B): A luminous, dusty green — the color of a quiet forest floor.
• Heather (#977D8D): A luminous, dusty pink — the color of peonies in June.
• Deep Olive (#564400): A deep, shadowed, balanced green — the color of fresh herbs.

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 Fern Chapel color palette (#F7F5ED, #BBE3D9, #73C0AA, #6F8E7D, #444C00)
• Aged Taupe color palette (#FCF4E9, #D8E3BC, #8EA96D, #8B6B7E, #3B3831)
• Tempered Lagoon color palette (#EFF7F2, #A6CABC, #598D83, #52697B, #3B534A)
• Washed Thicket color palette (#FFF1F3, #FDD7FF, #BED791, #BC81C1, #47473F)
• Patina Study color palette (#FFF1F4, #E3D9D2, #A9B5AF, #ABACD9, #5C4648)
• Mallow Hollow color palette (#FFF0FA, #E3D7E5, #CFA1F4, #996A92, #614444)
• Worn Lagoon color palette (#F7F6E8, #ACDEB8, #00A08A, #80555D, #262B13)
• Quiet Archive color palette (#EBDFCE, #8E9449, #1B5D00, #301C56, #010100)

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