
Figma color wheel
Want to find the perfect complementary or analogous colors to match yellow?
Skip to main content
Everything you need to know about yellow to inspire your next design.
Yellow is a bright and cheerful color that radiates happiness and energy. Positioned between green and orange on the color wheel, it’s a striking shade (and pure hue) that energizes with its vivid appeal.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Dijon Mustard
Sunlit Prism
Zesty Citrus
Yellow is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FFDE21
- RGB value: 100% red, 87.1% green and 12.9% 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 yellow in 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 vibrant and energizing spectrum as yellow, consider:
To complement yellow’s bright tones, consider pairing it with:
Additional colors worth considering include deep green for a natural vibe, red for a striking impact, and black for a bold, classic combination.
While yellow is versatile, it may clash with:
Yellow symbolizes joy and optimism and evokes warmth. It's culturally tied to wealth, prosperity, and wisdom, offering a broad spectrum of emotional and cultural significance.
Psychologically, yellow boosts mental activity and energy, attracting attention and stimulating communication. Its vibrant hue can enhance focus and elevate moods, serving as an effective stimulant in many settings.
In UI/UX design, yellow’s lively presence can improve user engagement, making interfaces inviting and energetic. It supports a brand’s image as innovative and user-friendly, using its brightness to create standout designs that encourage interaction and positivity.
Yellow has been used throughout the ages to capture the essence of light and life. In ancient times, people extracted yellow pigment from clay ochre to paint the sun and stars on cave walls, representing the day’s guiding light. The Egyptians revered yellow as the color of the sun, gold, and immortality. Yellow-adorned tombs and treasures were a testament to eternal life.
During the Renaissance, artists like Vermeer and Rembrandt used yellow to symbolize enlightenment and innovation in their paintings. In China, yellow was reserved for the Emperor and his palace, representing authority, honor, and a connection to the heavens.
In the late 19th century, Vincent van Gogh's "Sunflowers” series, painted in the 1880s, captured the essence of joy and the nature of life, illustrating yellow's ability to communicate profound emotions and beauty.
Contrast 1.34
#FFDE21
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 15.72
#FFDE21
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFDE21, known as yellow, has RGB values of R:255, G:222, B:33 and CMYK values of C:0, M:0.13, Y:0.87, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FFDE21 | #FFDE21 |
| RGB DECIMAL | 255, 222, 33 | rgb(255,222,33) |
| RGB PERCENTAGE | 100, 87.1, 12.9 | rgb(100%,87.1%,12.9%) |
| CMYK | 0, 13, 87, 0 | |
| HSL | 51.1°, 100, 56.5 | hsl(51.1,100%,56.5%) |
| HSV (OR HSB) | 51.1°, 87.1, 100 | |
| WEB SAFE | FFCC33 | #FFCC33 |
| CIE-LAB | 88.74, -5.073, 84.47 | |
| XYZ | 67.637, 73.615, 12.085 | |
| xyY | 0.441, 0.48, 73.615 | |
| CIE-LCH | 88.74, 84.623, 93.437 | |
| CIE-LUV | 88.74, 30.111, 92.366 | |
| HUNTER-LAB | 85.799, -9.434, 51.708 | |
| BINARY | 11111111, 11011110, 00100001 | |
| iOS - SwiftUI | Color(red: 1.0, green: 222/255, blue: 33/255) | |
| iOS - UIKit | UIColor(red: 1.0, green: 222/255.0, blue: 33/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFFFDE21) |

Want to find the perfect complementary or analogous colors to match yellow?

Learn about the subdued lightness of pastels.

Learn more about yellow-green.