Should Maillard and caramel orange be two separate pages?

No, they are merged here. Caramel orange is the orange end of the Maillard range, and both words point at the same palettes, so two pages would show the same examples twice.

Why are the primaries mustard and brown orange rather than vivid orange?

Because they have to hold body text. A vivid orange fails 4.5:1 against dark type, and darkening it until it passes produces exactly these colors. That is a contrast floor, not a taste.

Does Maillard work in dark mode?

Yes, with a lifted primary, otherwise brown cards lose their edges on a dark ground. Run it through the dark mode converter, which prints the measured contrast of every pair.

Home / Families / Maillard color palettes

Maillard color palettes

The name comes from the browning reaction in cooking: sugar and protein turning brown under heat, which gave brown, coffee, chestnut and caramel one shared family name. On screen they share a hue band from 18 to 42 degrees, moderate saturation and a lightness below the middle. The library has no Maillard tag, so this page selects by value: of 100 palettes, 8 have a primary inside that band.

Last updated：2026-10-29

Maillard palettes in the library

Each card shows the primary, its saturation and the body contrast. Going muddy is the usual failure with this family, and that contrast figure is how you catch it.

TurmericWedding planning & photography#b3701fsat 71%14.17:1 · AAA Old Gold LeafLifestyle & content community apps#ae7a24sat 66%13.34:1 · AAA Amber LinenOpen-source project home#a15636sat 50%14.54:1 · AAA Warm BrickCommute & transit navigation#b48822sat 68%14.27:1 · AAA Warm EmberCourse enrollment#cb7c48sat 56%14.41:1 · AAA CiderReading & note-taking#96411dsat 68%14.54:1 · AAA Warm Orange IsleLocal services & community apps#d96a24sat 72%15.08:1 · AAA Amber RidgeTrip planning & guides#dd762bsat 72%14.43:1 · AAA

What Maillard means on screen

It began as a browning reaction in cooking, was borrowed by fashion and interiors, and now covers the brown, coffee, chestnut and caramel family of warm dark colors. Whether a palette qualifies comes down to two conditions: a hue between orange and brown, and a lightness below the middle.

It is neither a single color nor a contest in darkness. The 8 palettes here run from golden brown to burnt umber, and what they share is warmth plus enough weight to hold white text.

Three rules

One: the ground has to stay light

A Maillard primary is already dark; darken the ground too and the whole page turns into a single mass. Body contrast across these 8 sits between 13.34:1 and 15.08:1, all of it from a light ground and dark type. In dark mode the primary needs a lift, or card edges disappear.

Two: allow one dark color

Put brown, coffee and chestnut together and none of them leads. Pick one as the primary for buttons and selected states, and let the rest fall back to neutrals. Past about a third of the screen, the warmth starts to feel heavy.

Three: accent with gold or brick, not more brown

Anything that has to jump out (badges, prices, alerts) takes gold or brick: same family, different lightness. One more brown only blurs the hierarchy further.

Is Maillard the same as caramel orange

Caramel orange is one end of the family: sugar at the moment it turns caramel, orange with brown in it, medium lightness. This page merges the two because they point at the same palettes in the library; separate pages would tell the same story twice. The warmest few in the set can fairly be called caramel orange.

When not to use it

Interfaces that need to feel crisp and new: tools, productivity apps. Warm dark colors carry age, and in large areas they feel heavy.
Dense tables. A dark brown rule or header sits too close to body text in lightness, and long sessions get tiring.
Anything relying on a warning color. Brown and red blur together on dim displays; use a lighter, more saturated red for danger.

Common questions

Should Maillard and caramel orange be two separate pages?: No, they are merged here. Caramel orange is the orange end of the Maillard range, and both words point at the same palettes, so two pages would show the same examples twice.
Why are the primaries mustard and brown orange rather than vivid orange?: Because they have to hold body text. A vivid orange fails 4.5:1 against dark type, and darkening it until it passes produces exactly these colors. That is a contrast floor, not a taste.
Does Maillard work in dark mode?: Yes, with a lifted primary, otherwise brown cards lose their edges on a dark ground. Run it through the dark mode converter, which prints the measured contrast of every pair.