Mustard yellow is a vivid, rich shade of yellow, giving it the warm and tangy qualities of its namesake condiment, yellow mustard. This color falls between the orange and yellow segments of the color wheel, giving it a deeper and earthier feel than other true yellows.
Mustard yellow is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FFCE1B
- RGB value: 100% red, 80.8% green, and 10.6% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use mustard yellow in your designs:
- Infuse warmth and optimism. Mustard yellow can create an inviting feeling when used in welcome or loading screens.
- Indicate success. This color evokes positivity on form validation pages and progress bars to signal completion.
- Enhance seasonal designs. Use mustard yellow's warmth to add comfort and cheer to fall designs.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same rich spectrum as mustard yellow, consider:
- Gold (#EFBF04) shares mustard yellow’s rich yellow and orange tones, just slightly darker.
- Amber (#FFBF00) brings a warmer, deeper feel and has more orange tones.
- Mimosa (#F2B949) is more muted and offers a calm alternative to mustard yellow.
- Dijon (#FFD700) is slightly more vibrant, and its hints of brown evoke an earthier vibe.
To complement mustard yellow, consider pairing it with:
- Royal blue (#305CDE) boldly contrasts mustard yellow and emphasizes its brightness.
- Teal (#069494) balances mustard yellow’s warmth to create a soothing and refreshing feel.
- Beige (#EDE8D0) gently plays off mustard yellow’s vibrancy with its light, soft tones.
- Royal purple (#6C3BAA) combines with mustard yellow’s rich tones for a more refined vibe.
Other colors worth considering include rust to enhance mustard yellow’s earthiness, neon purple to infuse a fun and playful look, and magenta to emphasize mustard yellow’s brightness.
While mustard yellow is warm, it may clash with:
- Mint green (#ADEBB3) may clash with mustard yellow’s saturation and warm undertones.
- Electric blue (#00F0FF) can compete with mustard yellow, creating an overwhelming visual.
- Violet (#7F00FF) may conflict with mustard yellow’s earthiness and brightness.
- Dark brown (#422921) can overpower mustard yellow and create a muddled palette.
Mustard yellow symbolizes optimism and comfort. Its warmth connotes earthiness and contentment, and its richness exudes sophistication and refinement.
In color psychology, mustard yellow evokes feelings of happiness and coziness. It creates a welcoming atmosphere that promotes creativity and joy.
In UI design, mustard yellow imbues positivity into designs. Use it as an accent or for success-based interactions to gently encourage users through onboarding or submissions. Mustard yellow is also a great choice to greet users upon entry to an app or website.
Mustard yellow has been a popular color in fine art since the 19th century. It had prominent roles in Impressionist and Fauvist art. Vincent van Gogh’s 1888 “The Bedroom” features a similar mustard yellow color for the bed and the chairs. Henri Matisse’s 1946 “Interior in Yellow” also incorporates a similar mustard yellow shade.
Among interior design and decor enthusiasts, this warm yellow color is a popular shade for mid-century modern furniture and color schemes.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Artisanal Mustard
Neo-Retro
Sunburst
Contrast 1.49
- Large Text
#FFCE1B
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 14.1
- Large Text
#FFCE1B
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFCE1B, known as mustard yellow, has RGB values of R:255 G:206, B:27 and CMYK values of C:0, M:0.19, Y:0.89, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FFCE1B | #FFCE1B |
| RGB DECIMAL | 255, 206, 27 | RGB(255,206,27) |
| RGB PERCENTAGE | 100, 80.8, 10.6 | RGB(100%,80.8%,10.6%) |
| CMYK | 0, 19, 89, 0 | |
| HSL | 47.1°, 100, 55.3 | HSL(47.1°,100%,55.3%) |
| HSV (OR HSB) | 47.1°, 89.4, 100 | |
| WEB SAFE | FFCC33 | #FFCC33 |
| CIE-LAB | 84.733, 2.931, 82.455 | |
| XYZ | 63.51, 65.485, 10.332 | |
| xyY | 0.456, 0.47, 65.485 | |
| CIE-LCH | 84.733, 82.508, 87.964 | |
| CIE-LUV | 84.733, 41.954, 87.025 | |
| HUNTER-LAB | 80.923, -1.523, 49.076 | |
| BINARY | 11111111, 11001110, 00011011 | |
| iOS - SwiftUI | Color(red: 1, green: 0.808, blue: 0.106) | |
| iOS - UIKit | UIColor(red: 1, green: 0.808, blue: 0.106, alpha: 1) | |
| Android - Compose | Color(0xFFFFCE1B) |
