Cocoa Ridge color palette — #FFF2EA · #DFB496 · #AF846F · #885D4F · #593300

Cocoa and Sand set the tone — five colors that lean into optimism and warmth.

The five colors

• Ivory (#FFF2EA): a clean, paper-quiet neutral.
• Sand (#DFB496): A luminous, dusty gold — the color of old brass.
• Caramel (#AF846F): A luminous, dusty orange — the color of autumn markets.
• Pewter (#885D4F): A full-bodied, dusty orange — the color of toasted spice.
• Cocoa (#593300): A deep, shadowed, balanced gold — the color of afternoon light on wheat.

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

• Pale Chapel color palette (#FFE8D9, #E4B382, #B68E4F, #7C6200, #493F00)
• Softworn Veranda color palette (#FFF2ED, #E6BA98, #946263, #5F3536, #2D1D18)
• Bronze Market color palette (#F9E3D5, #D5A180, #AE6E50, #7B4E42, #352F2A)
• Quiet Chestnut Terrace color palette (#F6E1CF, #B57F4A, #8E4D16, #662700, #221200)
• Patina Bronze Coast color palette (#F2E8CD, #A0A36E, #7D7420, #5D4B00, #2A2403)
• Blush Station color palette (#FFF2EF, #D78194, #A38D53, #6967A2, #462B26)
• Aged Atelier color palette (#EBE0D0, #886B00, #5B4000, #351F00, #050300)
• Worn Lilac Coast color palette (#FFF1F4, #B785C2, #008D93, #20638D, #33202B)

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