Dark yellow is a rich, subdued shade that mellows yellow’s brightness with earthy brown undertones. It’s found in the red-orange portion of the color wheel and exudes warmth and creativity.
Dark yellow is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #BA8E23
- RGB value: 72.9% red, 55.7% green, and 13.7% 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 dark yellow in your designs:
- Draw attention to key details. Dark yellow is a subdued alternative to brighter shades of yellow. Use it to highlight CTAs or important information without overwhelming users.
- Infuse energy. Dark yellow encourages motivation and optimism during long processes. Incorporate this color in buttons and callouts in multi-step applications or forms.
- Give visual cues. Consider using dark yellow to help users understand what to do next. Add this color to emphasize tooltips, hover effects, and progress bars.
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 warm spectrum as dark yellow, consider:
- Tan (#D6B588) is a lighter shade on the red-orange part of the color wheel, infusing designs with a more calm and subtle quality.
- Yellow-orange (#FFB343) is brighter and more saturated, radiating happiness and warmth.
- Gold (#EFBF04) has more yellow undertones, symbolizing status and wealth.
- Bronze (#CE8946) shares dark yellow’s earthiness with a mix of brown and dark orange shades.
To complement dark yellow, consider pairing it with:
- Navy blue (#000080) contrasts dark yellow, balancing its yellow hues with a cool, calming tone.
- Cool gray (#CBCBCB) elevates dark yellow’s warmth, making it pop.
- Crimson red (#B22222) adds depth and creates an energetic palette.
- Indigo (#560591) boldly contrasts dark yellow to evoke sophistication and luxury.
Other colors worth considering include dark teal for a tranquil look, dark orange to emphasize yellow’s earthiness, and green sage for a relaxed and natural vibe.
While dark yellow is earthy, it may clash with:
- Magenta (#FD3DB5) has a saturation that clashes with dark yellow’s subdued shade.
- White (#FFFFFF) may make dark yellow appear dingy and washed out.
- Bright orange (#FF991C) can compete with dark yellow with its brightness.
- Neon green (#2CFF05) creates a harsh contrast with its vibrancy.
Dark yellow symbolizes warmth and maturity. Its earthiness connotes comfort and approachability. Dark yellow embodies creativity but can also exemplify melancholy. Keep context in mind to avoid clashing themes.
In color psychology, dark yellow is stimulating and aids in creative work and focus. Its deeper tone evokes feelings of gentle encouragement.
In UI design, dark yellow is a mellow alternative to the vibrancy and energy of brighter yellows for highlighting information. Its natural tone creates a welcoming environment. Pair dark yellow with cool complementary colors for more sophisticated experiences.
Dark yellow has been a popular choice for well-known fine artists. Johannes Vermeer’s 1665 painting “Girl with a Pearl Earring” used dark yellow in the girl’s headscarf and jacket. Vincent van Gogh’s Sunflower series from 1887 and 1888 featured dark yellow sunflowers contrasted with lighter backgrounds.
Today, dark yellow’s sophistication and warmth extend beyond fine art. Its versatility makes it a refined color choice to include in many types of color palettes.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Toffee Caramel
Treasure Map
Golden Harmony
Contrast 3.01
- Large Text
#BA8E23
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 6.98
- Large Text
#BA8E23
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #BA8E23, known as dark yellow, has RGB values of R:186, G:142, B:35 and CMYK values of C:0, M:0.24, Y:0.81, K:0.27.
| VALUE | CSS | |
|---|---|---|
| HEX | BA8E23 | #BA8E23 |
| RGB DECIMAL | 186, 142, 35 | RGB(186,142,35) |
| RGB PERCENTAGE | 72.9, 55.7, 13.7 | RGB(72.9%,55.7%,13.7%) |
| CMYK | 0, 24, 81, 27 | |
| HSL | 42.5°, 68.3, 43.3 | HSL(42.5°,68.3%,43.3%) |
| HSV (OR HSB) | 42.5°, 81.2, 72.9 | |
| WEB SAFE | CC9933 | #CC9933 |
| CIE-LAB | 61.575, 6.913, 58.624 | |
| XYZ | 30.227, 29.908, 5.771 | |
| xyY | 0.459, 0.454, 29.908 | |
| CIE-LCH | 61.575, 59.03, 83.274 | |
| CIE-LUV | 61.575, 36.697, 59.375 | |
| HUNTER-LAB | 54.688, 2.954, 32.025 | |
| BINARY | 10111010, 10001110, 00100011 | |
| iOS - SwiftUI | Color(red: 0.729, green: 0.557, blue: 0.137) | |
| iOS - UIKit | UIColor(red: 0.729, green: 0.557, blue: 0.137, alpha: 1) | |
| Android - Compose | Color(0xFFBA8E23) |
