Weathered Cocoa color palette — #FFF2EC · #D3BDA6 · #A4A682 · #98677B · #7F4222
Bronze and Mocha set the tone — five colors that lean into optimism and sophistication.
The five colors
- Ivory (#FFF2EC): a clean, paper-quiet neutral.
- Sand (#D3BDA6): A luminous, dusty gold — the color of old brass.
- Sage (#A4A682): A luminous, dusty green — the color of a quiet forest floor.
- Mocha (#98677B): A full-bodied, dusty rose — the color of strawberry cream.
- Bronze (#7F4222): A full-bodied, balanced orange — the color of sun-warmed clay.
Feels like: Optimism, Sophistication. Tagged vintage, retro, muted.
Use it as a design system
One click turns Weathered Cocoa 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
- Bronze Archive color palette (#FFF3E9, #DFD9C7, #9DAB92, #B0714C, #75410B)
- Oat Pier color palette (#FEF0CC, #BFDEAC, #A9B999, #9D8593, #61444C)
- Cerulean Field color palette (#F5F6ED, #B5CCAA, #549BAA, #975F6A, #384830)
- Timeworn Mulberry color palette (#F1E0D2, #C9A56C, #5E9B6D, #994154, #552E00)
- Turquoise Orchard color palette (#F3E7B1, #96C8A2, #39A4BA, #926644, #6E3900)
- Hushed Harbor color palette (#F2E6CE, #86AF8A, #5F866E, #7D4F0F, #3D3832)
- Cocoa Boulevard color palette (#DCE5C6, #8C9770, #3E7F7C, #723A00, #272800)
- Pewter Grove color palette (#E0FAED, #95C0B8, #699396, #556080, #594259)
Browse the whole catalog at Explore, or see today's palette.