Cocoa Ridge color palette — #F9F3F9 · #E8D8D7 · #987A97 · #653738 · #201820

Cocoa and Heather set the tone — five colors that lean into sophistication.

The five colors

• Ivory (#F9F3F9): bright and airy, almost weightless.
• Bone (#E8D8D7): a clean, paper-quiet neutral.
• Heather (#987A97): A luminous, dusty pink — the color of neon signs at night.
• Cocoa (#653738): A deep, shadowed, dusty red — the color of late-summer berries.
• Ink (#201820): quiet, heavy and certain.

Feels like: Sophistication. Tagged luxury, dark, muted.

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

• Antique Loft color palette (#FBF2F6, #BEE8EE, #A27D5E, #5B3B48, #22181C)
• Stone Dune color palette (#FDEEEB, #C9C78B, #7E5260, #422A27, #1C100F)
• Wandering Garden color palette (#F0F7F1, #FCE2B2, #8F7141, #4C3300, #09120A)
• Patina Coast color palette (#F8F3FA, #E0E2AF, #D08599, #76667C, #2F2931)
• Antique Coral Dune color palette (#F9F3F7, #EBD8DA, #D6A368, #D67F67, #2A181E)
• Tempered Cerulean Meadow color palette (#F3F4FF, #C9B7F4, #6FBFB4, #3090A2, #2D3044)
• Tempered Thicket color palette (#F6F3FD, #DDADDB, #57A4AF, #336798, #242636)
• Worn Amber color palette (#FCE8EE, #C99845, #563300, #322F29, #0F0500)

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