Cocoa Ridge color palette — #FFF0F7 · #E5B9CC · #AF7751 · #773D09 · #533316

Bronze and Caramel set the tone — five colors that lean into optimism and warmth.

The five colors

• Ivory (#FFF0F7): bright and airy, almost weightless.
• Carnation (#E5B9CC): A whisper-light, dusty rose — the color of strawberry cream.
• Caramel (#AF7751): A luminous, balanced gold — the color of afternoon light on wheat.
• Bronze (#773D09): A full-bodied, balanced gold — the color of old brass.
• Cocoa (#533316): A deep, shadowed, dusty gold — the color of honey in a jar.

Feels like: Optimism, Warmth, Comfort, Sophistication. Tagged monochrome, muted, warm.

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

• Patina Amber Quarry color palette (#FFECF3, #F5C6A2, #B77A44, #72411F, #351424)
• Garnet Workshop color palette (#FDF0FF, #E0C4E6, #AA6672, #7A3044, #50272C)
• Tempered Chestnut Studio color palette (#E6FDE5, #B9D7B6, #A37941, #6D4B00, #4D3610)
• Weathered Delta color palette (#FFF3E8, #FFCDA8, #CB8954, #8B5737, #3D3632)
• Chestnut Grove color palette (#FEF1F9, #CBAFBB, #97748A, #814D4B, #3D4D3C)
• Tempered Market color palette (#FEF1F7, #C2E8EC, #A0D3D1, #AF736E, #5F4A53)
• Inked Workshop color palette (#F6E6D3, #845500, #3C2200, #141911, #0E0600)
• Amber Market color palette (#F8E7B1, #AE953A, #654F00, #322600, #1B1200)

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