Skip to main content

Yellow

Yellow

Everything you need to know about yellow to inspire your next design.

Pick a palette type

What color is yellow?

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.

yellow coloryellow color

What does yellow look like on digital screens?

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.

How should I effectively use yellow in UI design?

Here are some ways to use yellow in designs:

  • Attract attention. Use yellow to make elements stand out, such as buttons, alerts, or icons. Its natural brightness catches the eye, making it perfect for important navigation points.
  • Stimulate positivity. Incorporate yellow to create a friendly, welcoming atmosphere. Its association with happiness and warmth can make users feel more optimistic and engaged.
  • Enhance visibility. Yellow offers excellent contrast against darker shades for readability and highlighting.
  • Communicate energy. Apply yellow in dynamic or creative settings to convey energy and inspire action. It’s ideal for platforms promoting innovation, creativity, or youthfulness.

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.

What are similar colors to yellow?

For variations within the same vibrant and energizing spectrum as yellow, consider:

  • Lemon (#FFF44F) offers a bright, pure yellow that shares yellow's sunny and cheerful essence.
  • Amber (#FFBF00) introduces a touch of orange, providing a deeper, golden tone that retains the vibrancy of yellow.
  • Mustard (#FFDB58) presents a muted, earthy yellow that echoes yellow’s warmth with a subdued intensity.
  • Saffron (#F4C430) offers a slightly orange-tinted yellow, capturing the spice's rich hue and adding exotic warmth.

What colors go with yellow?

To complement yellow’s bright tones, consider pairing it with:

  • Navy blue (#000080) offers a deep, rich contrast that highlights yellow’s brightness.
  • Gray (#898989) provides a neutral backdrop that allows yellow to stand out vividly.
  • Lavender (#D3D3FF) is a soft, gentle color that harmonizes subtly with yellow's warmth.
  • Teal (#069494) merges blue and green hues that balance beautifully with yellow’s exuberance.
  • White (#FFFFFF) creates a crisp, clean look that enhances yellow's light and airy feel.

Additional colors worth considering include deep green for a natural vibe, red for a striking impact, and black for a bold, classic combination.

What colors conflict with yellow?

While yellow is versatile, it may clash with:

  • Dark purple (#800080) can overwhelm yellow’s lightness, leading to a discordant visual impact.
  • Olive green (#808000) sometimes dulls yellow’s vibrancy due to its muted earthiness.
  • Hot pink (#FF69B4) competes with yellow for attention, potentially creating a visually jarring combination.
  • Dark brown (#654321) may overshadow yellow, making it appear washed out.
  • Bright red (#FF0000) can overpower yellow, making the pairing too aggressive for the eyes.

What does yellow symbolize?

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.

What’s the history of yellow?

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.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Dijon Mustard

Sunlit Prism

Zesty Citrus

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.
This is #ffde21 text on a #FFFFFF background.

1.34:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Fail
AA
3:1
Fail
AAA
4.5:1
Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.
This is #ffde21 text on a #000000 background.

15.72:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Pass
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

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.

VALUECSS
HEXFFDE21#FFDE21
RGB DECIMAL255, 222, 33rgb(255,222,33)
RGB PERCENTAGE100, 87.1, 12.9rgb(100%,87.1%,12.9%)
CMYK0, 13, 87, 0
HSL51.1°, 100, 56.5hsl(51.1,100%,56.5%)
HSV (OR HSB)51.1°, 87.1, 100
WEB SAFEFFCC33#FFCC33
CIE-LAB88.74, -5.073, 84.47
XYZ67.637, 73.615, 12.085
xyY0.441, 0.48, 73.615
CIE-LCH88.74, 84.623, 93.437
CIE-LUV88.74, 30.111, 92.366
HUNTER-LAB85.799, -9.434, 51.708
BINARY11111111, 11011110, 00100001
iOS - SwiftUIColor(red: 1.0, green: 222/255, blue: 33/255)
iOS - UIKitUIColor(red: 1.0, green: 222/255.0, blue: 33/255.0, alpha: 1.0)
Android - ComposeColor(0xFFFFDE21)