Color Directory
Mustard Yellow
A deep golden yellow with a brown edge.
#E1AD01
- HEX
- #E1AD01
- RGB
- rgb(225, 173, 1)
- HSL
- hsl(46, 99%, 44%)
Check Mustard Yellow
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #E1AD01 in the sRGB colour space.
About this entry
What it is
A deep golden yellow with a brown edge.
Retro design, accent buttons and seventies-inspired palettes.
Copy & use
How to copy and use mustard yellow
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Retro design, accent buttons and seventies-inspired palettes.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from mustard yellow
Each step is mixed toward white or black from #E1AD01 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#F3DE99
rgb(243, 222, 153)
Lighter 30%
#EAC64D
rgb(234, 198, 77)
- Base
Base
#E1AD01
rgb(225, 173, 1)
Darker 30%
#9E7901
rgb(158, 121, 1)
Darker 60%
#5A4500
rgb(90, 69, 0)
Name & pairing
Where mustard yellow comes from
Named for the condiment rather than the flower, which is brighter. The brown in it is what makes it wearable — a pure yellow at the same lightness is difficult to use at any size.
What to put beside it
Strong with navy and charcoal, and difficult next to warm oranges where the two compete. Give it space; it does not want to be one of several accents.
Common questions
Using mustard yellow
What is mustard yellow?
A deep golden yellow with a brown edge. Retro design, accent buttons and seventies-inspired palettes.
What are the colour values for Mustard Yellow?
Mustard Yellow is HEX #E1AD01, RGB rgb(225, 173, 1), HSL hsl(46, 99%, 44%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will mustard yellow work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise mustard yellow after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing