Tempered Cocoa color palette — #F2F5FF · #D1D3ED · #B9AFD6 · #9F819A · #6B475C

A conversation between Charcoal Brown and Mauve, giving this palette its sense of sophistication and softness.

The five colors

• Ivory (#F2F5FF): bright and airy, almost weightless.
• Lilac Frost (#D1D3ED): A whisper-light, dusty violet — the color of wild irises.
• Mauve (#B9AFD6): A luminous, dusty violet — the color of wild irises.
• Heather (#9F819A): A luminous, dusty pink — the color of peonies in June.
• Charcoal Brown (#6B475C): A full-bodied, dusty pink — the color of a candy shop window.

Feels like: Sophistication, Softness, Clarity. Tagged vintage, retro, muted, light.

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

• Hushed Garnet Villa color palette (#FFE9FC, #B1B7E5, #9C7685, #70504B, #581C02)
• Washed Driftwood color palette (#F6F3FF, #E4D3F3, #C5B0C9, #AA865E, #3B5A45)
• Wandering Violet color palette (#D8E6FF, #BCC6FF, #9F9CF1, #8570C8, #504270)
• Driftwood Thicket color palette (#DDF7FF, #B3CCDC, #909FBD, #89764E, #26574F)
• Cocoa Archive color palette (#E8DAFA, #927B9A, #8F5154, #604500, #161200)
• Hazy Bronze Boulevard color palette (#F5EBF8, #DDADCF, #D37DA1, #BA6300, #563900)
• Linen Violet Bloom color palette (#F3F4FF, #E5D2FF, #C19EEC, #8E65B8, #3A2253)
• Teal Thicket color palette (#EBF8F8, #ADE0E3, #6FBDAB, #569E9D, #214A4C)

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