Tempered Cocoa color palette — #EFF8F0 · #AF9369 · #5370A3 · #7E3D3B · #57351D

A conversation between Rust and Slate, giving this palette its sense of trust and stability.

The five colors

• Ivory (#EFF8F0): bright and airy, almost weightless.
• Caramel (#AF9369): A luminous, dusty gold — the color of afternoon light on wheat.
• Slate (#5370A3): A full-bodied, balanced violet — the color of a velvet chair.
• Rust (#7E3D3B): A full-bodied, balanced orange — the color of sun-warmed clay.
• Cocoa (#57351D): A deep, shadowed, dusty gold — the color of afternoon light on wheat.

Feels like: Trust, Stability, Optimism, Sophistication. Tagged muted.

Use it as a design system

One click turns Tempered 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

• Timeworn Cocoa Garden color palette (#ECF9F1, #A39962, #217C95, #85391F, #264B38)
• Muted Mulberry Coast color palette (#FCF2F6, #C18A66, #367F6F, #783969, #593648)
• Wandering Petrol Coast color palette (#F2F3E9, #7FAA6D, #167D9D, #5A4068, #392010)
• Wandering Workshop color palette (#E7FCE7, #B7CDC7, #7698A3, #796375, #634C51)
• Garnet Alley color palette (#E7FCEA, #A17500, #006284, #741A00, #402C00)
• Aged Lantern color palette (#ECF8F6, #95BF83, #1C9ABF, #775C89, #53394A)
• Washed Drift color palette (#F9F5E6, #CACE7A, #9CA6D7, #A87490, #5C3636)
• Nightshade Alley color palette (#EDF8F5, #8AA16F, #617A41, #57458A, #3F471D)

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