Skip to main content

Bright yellow

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

Pick a palette type

What color is bright yellow?

Bright yellow is a bold and vibrant shade with attention-grabbing qualities. It’s positioned in the yellow segment of the color wheel, exuding a warm and cheerful vibe reminiscent of sunshine.

bright yellow colorbright yellow color

What does bright yellow look like on digital screens?

Bright yellow is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

- HEX code: #FFED29

- RGB value: 100% red, 92.9% green, and 16.1% 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 bright yellow in UI design?

Here are some ways to use bright yellow in your designs:

  • Grab attention. Bright yellow is perfect for drawing a user’s eye to important elements within an interface. For example, bright yellow CTAs can encourage users to click on buttons like “Sign Up” or “Buy Now.”
  • Stimulate creativity. The vibrancy of bright yellow is often associated with energy and mental stimulation. This makes it ideal for interfaces designed to spark creative and innovative thinking.
  • Signal errors. Bright yellow’s eye-catching hue can indicate errors, warning messages, or other non-critical notifications.

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 bright yellow?

For variations within the same vivid spectrum as bright yellow, consider:

  • Yellow (#FFFF66) is the purest form of yellow, appearing more vibrant and saturated.
  • Pastel yellow (#FFEE8C) is muted, giving a softer and more radiant appearance.
  • Gold (#EFBF04) takes a slightly darker turn, capturing the essence of the precious metal.
  • Amber (#FFBF00) brings a warmer touch, swaying more orange than yellow.

What colors go with bright yellow?

To complement bright yellow, consider pairing it with:

  • Light blue (#90D5FF) creates a harmonious color palette similar to a clear sky on a sunny day.
  • Pink (#FF8DA1) adds a playful touch, creating a fun and cheerful color combination.
  • Lavender (#D3D3FF) balances bright yellow’s warmth, creating a springtime feel.
  • Mint green (#ADEBB3) creates an invigorating and refreshing contrast next to bright yellow.
  • Brown (#895129) grounds bright yellow to create a warm and inviting color palette.

Other colors worth considering include teal to complement bright yellow’s warmth, gray for a sophisticated and modern feel, and white to allow bright yellow to take center stage.

What colors conflict with bright yellow?

While bright yellow is vibrant, it may clash with:

  • Lime green (#89F336) has a similar attention-grabbing effect, which can clash with bright yellow.
  • Mustard yellow (#FFCE1B) has a similar hue and may not provide enough visual interest when paired with bright yellow.
  • Purple (#9D00FF) is complementary to yellow, but they can appear visually distracting on screen when paired together.
  • Magenta (#FD3DB5) may compete with bright yellow for attention, resulting in a visually distracting color combination.

What does bright yellow symbolize?

Bright yellow symbolizes energy and happiness. Its bright and radiant nature offers a sense of warmth and friendliness, similar to sunshine. Bright yellow also carries connotations of creativity and mental clarity.

In color psychology, bright yellow evokes feelings of joy, excitement, and optimism. Its striking appearance can also promote awareness and focus, aiding decision-making and problem-solving.

In UI design, bright yellow can grab attention, making it a good choice for highlighting important information, alerts, warnings, or CTAs. It can also add warmth to interfaces, fostering a creative and energetic aesthetic.

What’s the history of bright yellow?

People have used the color yellow since prehistoric times, painting the sun and stars on cave walls with yellow ochre pigment. As pigments advanced, more shades of yellow, from brighter tones to softer hues, became accessible. =

Eventually, yellow became associated with caution and warning due to its attention-grabbing qualities. This made it a prominent shade for traffic signals, safety signs, and vehicles like taxis and school buses. Today, bright yellow is popular in graphic design, art, and branding because of its energetic and captivating hue.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Sunflower Haze

Electro Pop

Lemonade Stand

Accessibility

Contrast checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FFED29 text on a #FFFFFF background.

1.21: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 #FFED29 text on a #000000 background.

17.4: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
HEXFFED29#FFED29
RGB DECIMAL255, 237, 41RGB(255,237,41)
RGB PERCENTAGE100, 92.9, 16.1RGB(100%,92.9%,16.1%)
CMYK0, 7, 84, 0
HSL55°, 100, 58HSL(55°,100%,58%)
HSV (OR HSB)55°, 83.9, 100
WEB SAFEFFFF33#FFFF33
CIE-LAB92.571, -12.342, 85.922
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)