Skip to main content

Pastel yellow

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

Get color palette

Pick a color

Hex

RGB

HSB

HSL

Pick palette settings

Custom palettes

Pastel yellow is positioned close to yellow on the color wheel and with the addition of white, appears lighter and far less saturated than true yellow. This washed-out shade of the primary color yellow creates a soft and muted hue, similar to many of its pastel counterparts. Pastel yellow embodies joy and sunshine and includes an array of different tones like cream and canary.

pastel yellowpastel yellow

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

  • HEX code: #FFEE8C
  • RGB value: 100% red, 93.3% green, and 54.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 pastel yellow in your designs:

  • Add depth. The softness of pastel yellow can be an accent color or used within different textures and patterns on a page. This can help create visual depth without being too distracting.
  • Convey warmth. Pastel yellow’s warmth can help communicate a friendly, cheerful, and positive tone within UI designs.
  • Create clean designs. Design styles like flat design often use pastel colors to create simple and minimalistic user interfaces.

Remember 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 soft and cheery spectrum as pastel yellow, consider:

  • Yellow (#FFFF00) is a primary color that’s much brighter and more vibrant.
  • Lemon chiffon (#FFFACD) is a tad softer and more muted.
  • Cream (#FDFBD4) is a more neutral hue with the smallest touch of yellow.
  • Khaki (#F0E68C) has a green hue that gives off a more earthy vibe.

To complement pastel yellow, consider pairing it with:

  • Periwinkle (#CCCCFF) pairs well with pastel yellow for a whimsical touch.
  • Baby blue (#8FD9FB) creates a serene and calming color scheme reminiscent of a sunny spring day.
  • Orange (#FFA500) makes a bright and citrusy color combination.
  • Rosewater (#FFD6D1) creates a soft and feminine color palette.

Other colors that complement pastel yellow include white for a timeless and clean design, lilac to play up pastel yellow’s softness, and black for a bold and sophisticated contrast.

While pastel yellow is soft and subtle, it may clash with:

  • Mustard yellow (#E1AD01) may make pastel yellow look washed out due to its warmth.
  • Maroon (#550000) may overpower pastel yellows’ delicate hue.
  • Lime green (#89F336) can diminish the softness of pastel yellow, creating a visually overwhelming color scheme.
  • Dark green (#013220) may feel too heavy next to pastel yellow, overpowering its light and airy feel.
  • Purple (#9D00FF) may be visually jarring due to its boldness and intensity.

In color psychology, pastel yellow evokes feelings of calmness and joy. This innocent and light shade is often a symbol of happiness and optimism. Its closeness to yellow carries the same warmth, but its muted hue brings about a softer look. Pastel shades in general can induce feelings of peace and serenity.

In different cultures, the color yellow has many symbolic meanings. In China, yellow is a symbol of royalty and prosperity. In the Hispanic culture, yellow symbolizes life and death, prominently seen in the marigolds used to decorate altars for loved ones who have passed away.

Pastel yellow brings forth tranquility and adds freshness and cheerfulness to modern designs.

Pastel yellow comes from the primary color yellow. Yellow’s history goes back to ancient times when yellow ochre pigment was used to paint the sun and stars on cave walls. Historically, yellow has been a sacred color and is associated with gold.

The word “pastel” entered the English language during the 1660s and referred to chalk-like pigments. Eventually, the meaning of pastel evolved to encompass pale or light colors. Pastels became more prominent during the 18th century, as artists used them to create portraits and other art.

In American culture, pastel colors became popular in the 1950s, with pastel yellow being an influential color in interior design. The show “Miami Vice” also sparked another pastel trend during the ‘80s, showcasing Miami’s use of these tropical but muted hues in fashion and architecture. Today, pastel yellow is often used when designing products for babies or decorating kids’ bedrooms due to its gentle and tranquil hue.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Wheatfield

Fairy Glen

Sorbet Sunrise

Contrast checker

Contrast 1.18

Large Text

#FFEE8C

Normal Text

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

This is #FFEE8C text on a #FFFFFF background.
Category
Fail
Fail
Fail
Fail
Fail
Fail

Contrast 17.86

Large Text

#FFEE8C

Normal Text

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

This is #FFEE8C text on a #000000 background.
Category
Pass
Pass
Pass
Pass
Pass
Pass

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

The hexadecimal color #FFEE8C, known as pastel yellow, has RGB values of R:255 G:238, B:140 and CMYK values of C:0, M:7, Y:45, K:0.

VALUECSS
HEX#FFEE8C#FFEE8C
RGB DECIMAL255, 238, 140 RGB(255,238,140)
RGB PERCENTAGE100, 93.3, 54.9RGB(100%,93.3%,54.9%)
CMYK0, 7, 45, 0
HSL51.1°, 100, 77.5 HSL(51.1,100%,77.5%)
HSV (OR HSB)51.1°, 45.1, 100
WEB SAFE#FFFF99#FFFF99
CIE-LAB93.582, -7.143, 49.308
XYZ76.548, 84.304, 37.05
xyY0.387, 0.426, 84.304
CIE-LCH93.582, 49.822, 98.243
CIE-LUV93.582, 15.813, 65.837
HUNTER-LAB91.817, -11.865, 40.348
BINARY11111111, 11101110, 10001100
iOS - SwiftUIColor(red: 1, green: 0.933, blue: 0.549)
iOS - UIKitUIColor(red: 1, green: 0.933, blue: 0.549, alpha: 1)
Android - ComposeColor(0xFFFFEE8C)