Skip to main content

Light yellow

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

Get color palette

Pick a color

Hex

RGB

HSB

HSL

Pick palette settings

Custom palettes

Light yellow is a soft shade with warm and joyful qualities. Like other yellow hues, it symbolizes peace and sunshine while embodying new beginnings and a sense of freshness.

light yellowlight yellow

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

- HEX code: #FFFFC5

- RGB value: 100% red, 100% green, and 77.3% 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 light yellow in your designs:

  • Create a sense of warmth. Light yellow evokes feelings of happiness, optimism, and friendliness. It’s an excellent choice for interfaces like educational websites and apps that need to feel welcoming and inviting.
  • Improve readability. When paired with a dark text color, light yellow backgrounds can enhance readability and reduce eye strain for users.
  • Accentuate other colors. Light yellow can act as a bright and cheerful accent color, complementing a broader color palette within your design.

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 soft spectrum as light yellow, consider:

  • Pastel yellow (#FFEE8C) captures a softness similar to light yellow, creating a gentle, calm experience.
  • Cream (#FDFBD4) is a pale yellow, almost off-white hue that offers neutrality next to light yellow’s warmth.
  • Peach (#FFD3AC) is a soft pink with yellow undertones that match light yellow’s delicateness.
  • Light orange (#FFDBBB) matches the softness of light yellow but leans more orange with a hint of warmth.

To complement light yellow, consider pairing it with:

  • Pastel orange (#FFC067) adds a hint of vibrancy when paired with light yellow, creating a warm, inviting experience.
  • Pastel green (#80EF80) complements light yellow’s warmth with its refreshing, cool hues.
  • Cool gray (#CBCBCB) is a timeless neutral shade that creates a clean, calm contrast.
  • Lavender (#D3D3FF) matches the cheerfulness of light yellow to create a tranquil color combination.

Other colors worth considering include navy blue to create a playful contrast, terracotta to add a hint of earthiness, and turquoise for an eye-catching combination.

While light yellow is pale, it may clash with:

  • Neon green (#2CFF05) conflicts with the softness of light yellow and can create a jarring visual appearance.
  • Mocha (#6D3B07), when paired with light yellow, appears dull.
  • Olive green (#636B2F) may look muddy when paired with light yellow due to their close proximity on the color wheel.
  • Crimson red (#B22222) creates tension with its deep, cool tones contrasting light yellow's warmth.
  • Black (#000000) with light yellow forms a stark contrast, evoking a somber atmosphere.

Light yellow embodies the optimism and joy associated with sunshine. It evokes images of spring meadows, fluffy chicks, and the beginnings of a new day. This pale shade also carries connotations of intellect and mental clarity.

In color psychology, light yellow is a breath of fresh air. It uplifts the mood, sparks creativity, and generates feelings of happiness and peace. The lack of intensity makes it approachable and easy on the eyes, reducing stress and anxiety.

In UI design, light yellow fosters a warm ambiance and serves as a gentle highlight color, capturing attention without overwhelming the user. However, using light yellow by itself may reduce contrast. Pair it with darker colors or text to enhance readability and visual appeal.

Light yellow originates from the primary color yellow, dating back to prehistoric cave paintings when artists used yellow ochre pigments to depict the sun and stars. Also,  early association with gold made yellow a sacred color in many cultures.

Before specific names for light yellow hues existed, people described objects based on material, like“saffron-hued” or “ivory-colored.”  Light yellow emerged as a distinct color name during the 18th and 19th centuries with the evolution of color theory.

Today, light yellow appears in spring fashion, home decor, and designs for softer elements.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

Old World

Promenade

Prairie

Contrast 1.03

Large Text

#FFFFC5

Normal Text

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

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

Contrast 20.36

Large Text

#FFFFC5

Normal Text

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

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

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

The hexadecimal color #FFFFC5, known as light yellow, has RGB values of R:255 G:255, B:197 and CMYK values of C:0, M:0, Y:0.23, K:0.

VALUECSS
HEXFFFFC5#FFFFC5
RGB DECIMAL255, 255, 197RGB(255,255,197)
RGB PERCENTAGE100, 100, 77.3RGB(100%,100%,77.3%)
CMYK0, 0, 23, 0
HSL60°, 100, 88.6HSL(60°,100%,88.6%)
HSV (OR HSB)60°, 22.7, 100
WEB SAFEFFFFCC#FFFFCC
CIE-LAB98.754, -9.016, 27.808
XYZ87.076, 96.812, 66.92
xyY0.347, 0.386, 96.812
CIE-LCH98.754, 29.233, 107.963
CIE-LUV98.754, 2.997, 41.609
HUNTER-LAB98.393, -14.218, 28.55
BINARY11111111, 11111111, 11000101
iOS - SwiftUIColor(red: 1, green: 1, blue: 0.773)
iOS - UIKitUIColor(red: 1, green: 1, blue: 0.773, alpha: 1)
Android - Compose Color(0xFFFFFFC5)