Tempered Cocoa color palette — #FFF2ED · #C5FDE2 · #DFE1CC · #D29FB7 · #743F0B

A conversation between Bronze and Mauve, giving this palette its sense of optimism and sophistication.

The five colors

• Ivory (#FFF2ED): bright and airy, almost weightless.
• Honeydew (#C5FDE2): A whisper-light, dusty teal — the color of sea glass.
• Bone (#DFE1CC): A whisper-light, dusty green — the color of a quiet forest floor.
• Mauve (#D29FB7): A luminous, dusty rose — the color of pressed rose petals.
• Bronze (#743F0B): A full-bodied, balanced gold — the color of honey in a jar.

Feels like: Optimism, Sophistication, Softness, Clarity. Tagged pastel, light, 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

• Seafoam Ridge color palette (#FFF3E3, #DCFFB7, #59F6E0, #E69B82, #494740)
• Softworn Shell color palette (#E9E5F3, #9ED7FF, #FFB0A3, #5C5451, #322620)
• Soft Chapel color palette (#FFF2EB, #FFE274, #57F49E, #E37C96, #4B2B00)
• Sand Harbor color palette (#FFF0F9, #E9D4D1, #DFD39D, #A284A3, #5A424D)
• Timeworn Basalt Garden color palette (#FFF4DC, #C0DBA2, #B7AE76, #9D8267, #354400)
• Aged Marigold color palette (#FFF3E5, #EFAA43, #9EA7EC, #848BC0, #37322C)
• Weathered Celadon Grove color palette (#FFF1D8, #B7F3B1, #6ED8E2, #C78461, #32312A)
• Hushed Sand Summit color palette (#FFF3E4, #EFD287, #B68D50, #67625C, #292013)

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