#FFDB58Mustard Yellow hex code: #FFDB58 · RGB 255, 219, 88. Also called mustard.
Mustard yellow is a warm yellow named after the condiment. The common reference value is #FFDB58, which is fairly bright; the deeper, browner mustards seen in fashion and interiors are closer to #E1AD01 or #D4A531.
Mustard is a retro and autumn favorite: it shows up in fashion, mid-century interiors, food brands, and editorial design. On websites it's an energetic accent, highlight or badge color.
Yellow is light, so always use dark text on mustard; white text fails at every mustard shown here. Mustard pairs strongly with navy, teal, charcoal, eggplant and rust.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#FFDB58rgb(255, 219, 88) · reference#E1AD01rgb(225, 173, 1) · HueWiz pick#D4A531rgb(212, 165, 49) · HueWiz pick#C9A227rgb(201, 162, 39) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with mustard yellow's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around mustard yellow.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#FBF7EA · text #261F06 · link #876F00Spring collection
Designed around mustard yellow.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#181304 · text #F2EEE3 · link #FFDB58Hand-picked combinations that work with mustard yellow. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on mustard yellow | 1.35:1 | Fail | Fail |
| Black text on mustard yellow | 15.52:1 | AAA | AAA |
| Mustard Yellow text on white | 1.35:1 | Fail | Fail |
| Mustard Yellow text on near-black #111111 | 13.96:1 | AAA | AAA |
| White text on deeper mustard yellow #8B7200 | 4.66:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #FFDB58. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-mustard-yellow-50: #FFF7DB;
--color-mustard-yellow-100: #FFEDAE;
--color-mustard-yellow-200: #FCD857;
--color-mustard-yellow-300: #E0C04F;
--color-mustard-yellow-400: #BFA445;
--color-mustard-yellow-500: #9F893B;
--color-mustard-yellow-600: #816F31;
--color-mustard-yellow-700: #665928;
--color-mustard-yellow-800: #4D4320;
--color-mustard-yellow-900: #362F17;
--color-mustard-yellow-950: #201C0C;
--color-mustard-yellow: #FFDB58;
}:root {
--mustard-yellow: #FFDB58;
--mustard-yellow-rgb: 255 219 88;
--mustard-yellow-light: #FFEDAE;
--mustard-yellow-dark: #4D4320;
}
.btn-mustard-yellow {
background: #8B7200;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open mustard yellow in the Tailwind color generator.
#FFDB58 is the value HueWiz uses for mustard yellow; it equals rgb(255, 219, 88). Other common versions include #E1AD01 (dark mustard), #D4A531 (muted mustard), #C9A227 (olive mustard).
With an HSL hue of 47° and 100% saturation, mustard yellow reads as a warm yellow.
Use dark text. White on #FFDB58 measures 1.35:1 and black measures 15.52:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #8B7200.
Try mustard & navy (#E1AD01, #1D3557, #FAF6EC); mid-century (#D4A531, #1F6F78, #CC5500); mustard & plum (#E1AD01, #614051, #F6EFE6). Each palette above can be copied or opened in the HueWiz studio.
Mustard Yellow isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.