Shades of Mustard

What this tool does

Mustard is a dark, dusty, earthy yellow, the colour of the condiment it is named after, warm and a little retro. It is far softer and more grounded than a bright yellow, which is its whole appeal, but that muted quality makes it tricky to lighten and darken by eye without it sliding toward either pale gold or murky brown.

That is what this does. You give it a mustard, and it builds the whole run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named mustards and why this particular yellow feels so warmly nostalgic.

How to use it

1. Set your mustard. The tool opens showing a mustard and its Hex. Replace it using Change Color or the Color Picker, or enter a hex of your own.
2. Choose the count. The Color Shades number decides how many shades you get, ten to begin with. Raise it for a smoother run.
3. Grab what you need. Each shade shows its HEX, RGB, HSL, and HSV, ready to drop in.

Mustard is a muted, slightly brownish yellow, so its lighter steps move toward soft gold and its darker steps toward olive and brown. That earthy character is what to keep an eye on as the range spreads out.

How it works

The tool runs on TinyColor, a colour library that builds clean lighter and darker steps from a colour rather than just fading it. It takes your mustard, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Because mustard already has some brown and grey muted into it, its range reads as a set of warm, earthy yellows rather than bright ones. The lighter steps soften toward pale gold, and the darker steps deepen into olive and ochre-brown, keeping that understated, retro feel throughout.

The condiment, and the 1970s

Mustard the colour is named after mustard the condiment, the warm yellow paste made from ground mustard seeds. That is the key to it: this is not a bright, clean yellow but the duller, deeper, slightly brownish yellow of the jar, which is exactly what gives it its earthy, comfortable character.

The colour carries a strong sense of a particular era. In the 1970s, mustard yellow was everywhere, sitting alongside avocado green and burnt orange on sofas, kitchen appliances, and wallpaper across the decade. That is why mustard still reads as warm and nostalgic, with a retro, vintage feel baked in, and why its recent revival in fashion and interiors feels like a deliberate nod back to that time.

The named mustards, with hex codes

Mustard ranges from a brighter golden yellow to a dustier, browner tone. Here are useful reference points, with a hex for each.

• Mustard (#FFDB58): a brighter, warmer take on the colour, still softer than a pure yellow.
• Dusty Mustard (around #E1AD01): closer to the deeper, browner yellow of the condiment.
• Goldenrod (#DAA520): a rich, slightly more golden yellow.
• Dark Goldenrod (#B8860B): a deeper, browner golden tone.
• Ochre (around #CC7722): an earthy yellow-brown at the warmer edge.

The thing to know is that mustard is not a standard web colour and it varies a lot, from a fairly bright golden yellow to a deep, dusty, almost-brown one. If you mean a specific mustard, pick a hex and build from it, because the name alone could land anywhere across that range.

Where mustard works

Mustard is a confident warm colour that still feels grounded. It has the cheerfulness of yellow without the brightness, so it reads as cosy, earthy, and characterful rather than loud, which is why it has become a favourite for interiors, autumn fashion, and natural, vintage, and craft-led brands. It makes a strong statement while staying warm and approachable.

Because it is muted, mustard behaves almost like a warm neutral, carrying larger areas more comfortably than a pure yellow ever could. It works well as a main colour or a rich accent, and the lighter and deeper steps from this tool let you use it at both scales, a soft golden surface or a strong mustard feature, all in the same earthy family.

Building a palette from your mustard

Mustard's classic partner is a cool, deep blue. Navy and teal both sit across the wheel from its warm yellow, so the pairing of mustard and navy, or mustard and teal, is reliably smart and balanced, warm against cool. That contrast alone will carry a palette.

To build it out, use the steps from this tool as the spine: a deep ochre-mustard for text and depth, your main mustard as the warm feature colour, and a pale gold surface behind content. Then add a cool counterweight in navy or teal, with grey or charcoal for a modern look, or lean fully into autumn with rust, burgundy, and forest green. Mustard is warm and steady, so it sits happily across a whole layout.

Questions people ask

What colour is mustard?

A dark, dull, earthy yellow, named after the condiment. It is warmer and browner than a bright yellow, which is what gives it its cosy, slightly retro character.

What is the hex code for mustard?

There is no single official value, since mustard is not a standard web colour. A brighter mustard sits around #FFDB58, while a dustier one is closer to #E1AD01. For an exact match, use a specific hex.

What is the difference between mustard, yellow, and gold?

Mustard is a muted, brownish yellow, far softer than a pure, bright yellow. Gold is a brighter, more metallic-looking yellow. Mustard is the earthy, grounded member of the family.

Can I use my own mustard?

Yes. Paste your exact mustard in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, accents, and text.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Mustard (color), the condiment origin and the colour named after it. Wikipedia. https://en.wikipedia.org/wiki/Mustard_(color)