Cocoa Quarry color palette — #F6EFE9 · #CCB7A1 · #A38E73 · #5D2D00 · #030100

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

The five colors

• Cream (#F6EFE9): bright and airy, almost weightless.
• Stone (#CCB7A1): A luminous, dusty gold — the color of honey in a jar.
• Caramel (#A38E73): A luminous, dusty gold — the color of old brass.
• Cocoa (#5D2D00): A deep, shadowed, balanced gold — the color of old brass.
• Black (#030100): a grounded near-black with real depth.

Feels like: Optimism, Sophistication. Tagged scandi, muted, light.

Use it as a design system

One click turns Cocoa Quarry 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

• Timeworn Fern color palette (#F0EFE4, #D2D2B5, #A5A98D, #455500, #030300)
• Bronze Veranda color palette (#E5DDD7, #A0998E, #7D7227, #4A1A00, #140500)
• Pale Veranda color palette (#F1E1D0, #F07B04, #B07500, #6E5B00, #020100)
• Tempered Quarry color palette (#F0E8D1, #88822F, #445D1C, #002220, #000102)
• Eclipse Chestnut Market color palette (#F8ECD2, #8A5600, #3D3000, #001109, #020100)
• Aged Bronze Hollow color palette (#FCF4E9, #DADCCC, #C0C8A8, #936F34, #241D14)
• Washed Amber Bloom color palette (#FAF4EE, #DFDFCD, #9ABBBE, #BD8446, #39342F)
• Hushed Garnet color palette (#F7EBE5, #CFB5A3, #A18E7D, #6B1D03, #030100)

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