Using Mustard Yellow in design
HEX
#FFDB58
RGB
255, 219, 88
HSL
47°, 100%, 67%
HSV
47°, 65%, 100%
Mustard yellow (#FFDB58) carries a browned, kitchen-table warmth — less shouty than primary yellow, more grounded than gold. It reads easily as vintage sportswear, diner signage, or autumn palettes without sliding fully into orange. That muted quality makes it usable in larger fields where pure yellow would fatigue the eye.
Best for
Event branding, newsletters, and customer-facing web pages.
Compare with
Accessibility
Check contrast before using mustard yellow for text-heavy layouts, especially on low-contrast backgrounds.
How does mustard yellow compare to nearby colors?
What is the difference between mustard yellow and butter?
Mustard Yellow (#FFDB58) and Butter (#FFFF99) are close enough that the split is more about finish than headline contrast: Mustard Yellow feels more highlighter-bright, while Butter reads more butter-paper. Mustard Yellow brings more shadow to the system, so it handles contrast-heavy jobs more naturally than Butter. Begin with mustard yellow when the family needs its current undertone and surface character; keep butter for the nearby alternative that shifts the mood without leaving the same hue neighborhood.
What color is mustard yellow?
The name maps to prepared mustard's typical golden-brown cast. It surged in mid-century graphic design and 1970s fashion, and remains common in food branding, craft beer labels, and retro-styled interfaces.
What is the hex code for mustard yellow?
| Format | Value |
|---|---|
| HEX | #FFDB58 |
| RGB | rgb(255, 219, 88) |
| HSL | hsl(47°, 100%, 67%) |
| HSV / HSB | hsv(47°, 65%, 100%) |
| CMYK (approx.) | cmyk(0%, 14%, 65%, 0%) |
Convert Mustard Yellow to other color formats
Open the color converter with Mustard Yellow (#FFDB58) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Mustard Yellow in the color converter →What does mustard yellow mean in design?
Mustard yellow is sometimes associated with nostalgia, comfort food, or earthy sophistication. Next to bright lemon or canary, mustard reads older and more seasoned; beside goldenrod or honey, it stays yellower and less amber.
How do I use mustard yellow in code?
| CSS (hex) | color: #FFDB58; |
| CSS (rgb) | color: rgb(255, 219, 88); |
| CSS (hsl) | color: hsl(47, 100%, 67%); |
| RGB % | rgb(100%, 86%, 35%) |
| Tailwind | text-[#FFDB58] |
| SwiftUI | Color(red: 1.000, green: 0.859, blue: 0.345) |
| UIKit | UIColor(red: 1.000, green: 0.859, blue: 0.345, alpha: 1.0) |
| Android | Color.rgb(255, 219, 88) |
| Compose | Color(0xFFFFDB58) |
| Web Safe | #FFCC66 |
Is mustard yellow accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.35:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 15.53:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.35:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 15.53:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does mustard yellow look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with mustard yellow
With mustard yellow on broader surfaces, charcoal adds enough depth to keep the system legible without the harsher edge of pure black.
With mustard yellow, navy blue adds enough shadow that the yellow family can feel purposeful rather than simply loud.
Cream takes the hard digital edge off mustard yellow and makes the color feel more printed, paper-backed, and approachable.
What colors clash with mustard yellow
Neon Green competes with mustard yellow so aggressively that the palette never really settles into a clear primary-secondary relationship.
Magenta remaps mustard yellow too aggressively, dragging it away from alerts, signage, and data callouts and into a brighter, more performative palette.
Cyan redirects mustard yellow toward a more technical, backlit interpretation, which is risky when the goal is warmth, polish, or print-minded editorial work.
Light Gray makes mustard yellow feel softer, but often softer in the wrong way: less defined, not more refined.
How should I use mustard yellow in design?
- •Use mustard yellow for buttons, badges, and chart accents where it can stand out. Test text contrast with WCAG tools before using it for body copy on light backgrounds.
- •Cool neutrals like charcoal and slate sharpen mustard yellow's warm character, while warm companions like cream and gold amplify its inviting quality.
- •Mustard Yellow's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good mustard yellow palettes?
Vivid clarity
Event branding, newsletters, and customer-facing web pages.
Design with mustard yellow in Moda
Create a presentation or document using mustard yellow as your accent color. Moda's AI applies your color palette automatically.
Create a design with mustard yellow →What are the shades and tints of mustard yellow?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for mustard yellow?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Maize
Maize is near enough to mustard yellow to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Lemon
Lemon is near enough to mustard yellow to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Saffron
Saffron stays very close to mustard yellow in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Dandelion
Dandelion is almost the same hue as mustard yellow; the real difference is value, with dandelion feeling more grounded and anchor-ready.
Butter
Butter is close enough to mustard yellow to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Frequently asked questions
What is the hex code for mustard yellow?
The hex code for mustard yellow is #FFDB58. In RGB, that's 255 red, 219 green, and 88 blue. The approximate CMYK equivalent is 0% cyan, 14% magenta, 65% yellow, and 0% key (black).
Is mustard yellow a warm or cool color?
Mustard Yellow sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should mustard yellow lead the palette or stay in supporting roles?
Mustard Yellow has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does mustard yellow work best in a layout?
Mustard Yellow carries a lot of chroma, so it is usually strongest as punctuation rather than wallpaper. Use it for focal accents and let low-saturation surfaces do the balancing.
Is mustard yellow accessible?
Mustard Yellow works better with dark text than white text. Black text reaches 15.53:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More yellow colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Yellow colors
Compare mustard yellow with other yellow tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.