Cocoa Canyon color palette — #FDF3EF · #DCD1AF · #9F6F6C · #6E3D3C · #332925

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

The five colors

• Ivory (#FDF3EF): a clean, paper-quiet neutral.
• Wheat (#DCD1AF): A whisper-light, dusty green — the color of a quiet forest floor.
• Mocha (#9F6F6C): A full-bodied, dusty orange — the color of sun-warmed clay.
• Cocoa (#6E3D3C): A full-bodied, dusty orange — the color of sun-warmed clay.
• Espresso (#332925): a grounded near-black with real depth.

Feels like: Sophistication. Tagged luxury, dark, muted.

Use it as a design system

One click turns Cocoa Canyon 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 Market color palette (#FAF5EA, #DBC091, #82712C, #4D4217, #272114)
• Vanilla Courtyard color palette (#FAF2FA, #FFF8BD, #AF7373, #523F51, #201820)
• Dusty Bronze Pier color palette (#FCF3EE, #FFD6A9, #BD947E, #985B37, #332923)
• Chestnut Workshop color palette (#FBF2F8, #DFB2C2, #8A493A, #492F42, #2D2224)
• Aged Ember Canyon color palette (#FAF3F0, #EEC8B6, #7FA877, #CC6D5F, #2E2E28)
• Misty Terrace color palette (#FFF2EA, #CDBB6A, #A7490D, #622600, #291506)
• Amber Loft color palette (#F4EADA, #B08D3B, #5A4000, #251800, #040200)
• Pewter Cabin color palette (#FFF3E6, #E4B194, #969759, #7063A3, #4C4741)

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