Cocoa Ridge color palette — #F3F4FF · #EDD4E2 · #E1A4BD · #A5685E · #5A3000

Built around Cocoa, softened by Mocha — the whole palette hums with optimism and warmth.

The five colors

• Ivory (#F3F4FF): bright and airy, almost weightless.
• Silver (#EDD4E2): A whisper-light, dusty pink — the color of peonies in June.
• Ballet Pink (#E1A4BD): A luminous, dusty rose — the color of strawberry cream.
• Mocha (#A5685E): A full-bodied, balanced orange — the color of sun-warmed clay.
• Cocoa (#5A3000): A deep, shadowed, balanced gold — the color of honey in a jar.

Feels like: Optimism, Warmth, Comfort, Sophistication. Tagged 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

• Washed Study color palette (#FFF1F4, #FFCFD3, #E6A1BB, #CE727C, #783323)
• Bronze Villa color palette (#F5F3FF, #EADAD7, #D79E88, #8F6A31, #3D3F00)
• Frosted Garnet Ridge color palette (#F1F0FF, #DEA9CD, #B36D89, #803641, #4A1508)
• Muted Garnet Station color palette (#ECF7FF, #DAD7E9, #B4A6DC, #925E80, #69282B)
• Rust Grove color palette (#F9F0FF, #F689BE, #C64141, #643600, #181200)
• Worn Station color palette (#FDF0FF, #FFB2C8, #CD735A, #6D4800, #292600)
• Tempered Bronze color palette (#FFF1F3, #FFAB83, #AD7200, #4A4D00, #002109)
• Cypress Market color palette (#E5FAF8, #DBD8FF, #C6919C, #357F82, #3F3C50)

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