Tempered Cocoa color palette — #FFF2EC · #DFDFCC · #A3E3C9 · #CEA2A1 · #794016

Bronze and Mint set the tone — five colors that lean into optimism and sophistication.

The five colors

• Ivory (#FFF2EC): a clean, paper-quiet neutral.
• Bone (#DFDFCC): A whisper-light, dusty green — the color of fresh herbs.
• Mint (#A3E3C9): A whisper-light, dusty teal — the color of shallow lagoons.
• Rosewood Mist (#CEA2A1): A luminous, dusty red — the color of late-summer berries.
• Bronze (#794016): A full-bodied, balanced gold — the color of afternoon light on wheat.

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

• Cocoa Garden color palette (#FFF2E9, #DEDBCB, #96B3B9, #C19382, #5D3500)
• Gentle Harbor color palette (#FFF4DA, #D5FEA6, #77F1F2, #E28E7B, #45433C)
• Tempered Basalt color palette (#FCF5E4, #C1DBA6, #B6AE7A, #9E8266, #354400)
• Shell Station color palette (#E6E2FF, #98D9FF, #FFB19B, #655D59, #2D221B)
• Blush Balcony color palette (#FFF2EA, #F9E888, #7DEBA2, #E66F82, #4A3100)
• Wandering Amber color palette (#FDF4E8, #EDD390, #B58D4E, #67625C, #282016)
• Hazy Terrace color palette (#F6E4D2, #A3B160, #00B292, #A0594C, #0C0A00)
• Wandering Hollow color palette (#FEECF6, #DFFBDC, #C5CCA0, #A7687B, #432832)

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