Mocha Mousse Color Palette: HEX Codes, Pairings and How to Use It

Mocha Mousse is Pantone’s 2025 Color of the Year, coded PANTONE 17-1230. It sits in the warm brown family: milky cocoa, soft taupe and a hint of rose rather than a cold charcoal brown. Designers reach for it when they want earthiness without the heaviness of espresso or the sweetness of terracotta.

There is no single official “web HEX” stamped by Pantone for free public use. Values circulating online—often near #A47864, and sometimes close neighbours such as #A47764 or #96786D—are digital approximations. Treat #A47864 as a practical screen anchor in this guide, label every swatch as approximate, and match physically when colour-critical print or packaging is involved.

Each row is a complete five-colour scheme with Mocha Mousse (approx. #A47864) as the mid or brand step. Copy the HEX list into tokens, Figma styles or a Tailwind theme. Lightness is spread on purpose so you get a background, a surface, the hero brown, a structure colour and a near-black for text.

These are design starting points for digital work, not Pantone-certified matches. Soft-proof and adjust if you are shipping print, embroidery or LED signage.

Warm creams, ivory and soft beige are the most reliable partners. They share Mocha Mousse’s yellow-red undertone, so the brown reads as intentional rather than dirty. Cool blue-whites flatten it and make the palette feel dusty.

Muted sage, olive and dusty blue work as secondary accents because they are desaturated enough not to fight the brown. Keep them at roughly 10–20% of the layout. Soft blush and terracotta sit nearby on the wheel and extend the “edible” warmth of the name without needing a second hero colour.

For structure and text, prefer deep espresso, warm charcoal-brown or a soft navy over pure black. Black drains the temperature; a dark neighbour from the same family keeps the scheme cohesive. Browse brown, beige, cream and earthy collections when you want more ready-made sets in this neighbourhood.

In product UI, treat approx. #A47864 as a brand or accent surface—cards, chips, secondary buttons—rather than as body text on white. Mid browns often fail WCAG AA for small copy; pair light cream backgrounds with deep espresso text, and reserve Mocha Mousse for larger type, icons and fills.

A practical token map: cream 50–100 for page backgrounds, Mocha Mousse 500 for primary brand moments, espresso 800–950 for headings and borders. Check every text and interactive pair in a contrast checker before you ship, especially hover and disabled states where lightness drifts.

Dark mode works if you invert the ramp: deep espresso canvases, Mocha Mousse for elevated surfaces or focus rings, and cream for primary text. Avoid placing unsaturated brown on pure black; a warm near-black keeps the chocolate note visible.

In interiors, Mocha Mousse behaves like a soft neutral wall or upholstery colour. Pair it with limewash creams, oak and linen; add sage textiles or dusty-blue ceramics when you need a cool counterweight. Use deeper espresso on millwork or metal so the mid brown does not disappear under warm lighting.

For branding, the colour signals comfort, craft and quiet luxury—strong for food, beauty, hospitality and wellness. Lock one approximate HEX as the brand brown, document lighter and darker siblings, and forbid random “coffee” browns from creeping into the file. Competitors in tech skew blue; a considered mocha primary differentiates without shouting.

When campaigns move to print packaging, confirm the match against a physical Pantone 17-1230 reference. Screen approximations drift between monitors; the swatch book is the source of truth for coated and uncoated stock.

Drop the approximate Mocha Mousse anchor into a named Tailwind colour and keep a short lightness ramp for backgrounds, borders and text. The snippet below is a flat five-token set for quick prototypes; for a full 50–950 brand scale, generate shades from #A47864 in the Tailwind color palette generator.