Shades of Yellow

Shades of yellow include gold, khaki, lemon chiffon, moccasin, mustard, and cream. The base yellow color's hex value in HTML is #FFFF00. Browse named yellows, copy HEX codes, or build a full palette in Shade Color.

All Shades of Yellow

55 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named yellow colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Yellow

#FFFF00 Palette

W 1.1:1 Fail B 19.6:1 AAA

Gold

#FFD700 Palette

W 1.4:1 Fail B 15.0:1 AAA

Goldenrod

#DAA520 Palette

W 2.2:1 Fail B 9.4:1 AAA

Dark Goldenrod

#B8860B Palette

W 3.3:1 Fail B 6.5:1 AA

Pale Goldenrod

#EEE8AA Palette

W 1.3:1 Fail B 16.8:1 AAA

Khaki

#F0E68C Palette

W 1.3:1 Fail B 16.4:1 AAA

Dark Khaki

#BDB76B Palette

W 2.1:1 Fail B 10.1:1 AAA

Lemon Chiffon

#FFFACD Palette

W 1.1:1 Fail B 19.8:1 AAA

Light Yellow

#FFFFE0 Palette

W 1.0:1 Fail B 20.6:1 AAA

Light Goldenrod Yellow

#FAFAD2 Palette

W 1.1:1 Fail B 19.7:1 AAA

Cornsilk

#FFF8DC Palette

W 1.1:1 Fail B 19.7:1 AAA

Ivory

#FFFFF0 Palette

W 1.0:1 Fail B 20.8:1 AAA

Beige

#F5F5DC Palette

W 1.1:1 Fail B 19.0:1 AAA

Floral White

#FFFAF0 Palette

W 1.0:1 Fail B 20.2:1 AAA

Old Lace

#FDF5E6 Palette

W 1.1:1 Fail B 19.4:1 AAA

Papaya Whip

#FFEFD5 Palette

W 1.1:1 Fail B 18.6:1 AAA

Moccasin

#FFE4B5 Palette

W 1.2:1 Fail B 17.0:1 AAA

Navajo White

#FFDEAD Palette

W 1.3:1 Fail B 16.3:1 AAA

Wheat

#F5DEB3 Palette

W 1.3:1 Fail B 16.0:1 AAA

Bisque

#FFE4C4 Palette

W 1.2:1 Fail B 17.1:1 AAA

Blanched Almond

#FFEBCD Palette

W 1.2:1 Fail B 18.0:1 AAA

Mustard

#FFDB58 Palette

W 1.4:1 Fail B 15.5:1 AAA

Amber

#FFBF00 Palette

W 1.7:1 Fail B 12.7:1 AAA

Selective Yellow

#FFBA00 Palette

W 1.7:1 Fail B 12.3:1 AAA

Safety Yellow

#EED202 Palette

W 1.5:1 Fail B 13.9:1 AAA

Canary

#FFFF99 Palette

W 1.0:1 Fail B 20.0:1 AAA

Lemon

#FFF700 Palette

W 1.1:1 Fail B 18.6:1 AAA

Laser Lemon

#FFFF66 Palette

W 1.1:1 Fail B 19.7:1 AAA

Banana Yellow

#FFE135 Palette

W 1.3:1 Fail B 16.1:1 AAA

Sunglow

#FFCC33 Palette

W 1.5:1 Fail B 13.9:1 AAA

School Bus Yellow

#FFD800 Palette

W 1.4:1 Fail B 15.1:1 AAA

Taxi Yellow

#FCE300 Palette

W 1.3:1 Fail B 16.1:1 AAA

Cream

#FFFDD0 Palette

W 1.0:1 Fail B 20.2:1 AAA

Champagne

#F7E7CE Palette

W 1.2:1 Fail B 17.3:1 AAA

Vanilla

#F3E5AB Palette

W 1.3:1 Fail B 16.6:1 AAA

Flax

#EEDC82 Palette

W 1.4:1 Fail B 15.2:1 AAA

Straw

#E4D96F Palette

W 1.5:1 Fail B 14.5:1 AAA

Jasmine

#F8DE7E Palette

W 1.3:1 Fail B 15.7:1 AAA

Maize

#FBEC5D Palette

W 1.2:1 Fail B 17.3:1 AAA

Corn

#FBEC5D Palette

W 1.2:1 Fail B 17.3:1 AAA

Saffron

#F4C430 Palette

W 1.6:1 Fail B 12.8:1 AAA

Marigold

#EAA221 Palette

W 2.2:1 Fail B 9.7:1 AAA

Dandelion

#F0E130 Palette

W 1.4:1 Fail B 15.5:1 AAA

Minion Yellow

#F5E050 Palette

W 1.3:1 Fail B 15.7:1 AAA

Icterine

#FCF75E Palette

W 1.1:1 Fail B 18.6:1 AAA

Unmellow Yellow

#FFFF66 Palette

W 1.1:1 Fail B 19.7:1 AAA

Sunshine Yellow

#FFFD37 Palette

W 1.1:1 Fail B 19.4:1 AAA

Bright Yellow

#FFEA00 Palette

W 1.2:1 Fail B 17.0:1 AAA

Cadmium Yellow

#FFF600 Palette

W 1.1:1 Fail B 18.4:1 AAA

Aureolin

#FDEE00 Palette

W 1.2:1 Fail B 17.4:1 AAA

Citrine

#E4D00A Palette

W 1.6:1 Fail B 13.3:1 AAA

Mikado Yellow

#FFC40C Palette

W 1.6:1 Fail B 13.2:1 AAA

Naples Yellow

#FADA5E Palette

W 1.4:1 Fail B 15.3:1 AAA

Stil de Grain

#FADA5E Palette

W 1.4:1 Fail B 15.3:1 AAA

Old Gold

#CFB53B Palette

W 2.0:1 Fail B 10.3:1 AAA

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Red

Shades of Black

About Shades of Yellow

Yellow highlights energy and attention — soft creams for warm backgrounds, golds for premium accents, bright yellows for badges and warnings.

Want a full Yellow theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Yellow-50 … 950.
Copy the HEX values into CSS variables for production.

Popular Yellow Shades Glossary

Yellow notes below separate soft creams from signal yellows and gold accents for clearer design choices.

What is Gold?

Gold (#FFD700) is bright metallic yellow. Use for awards, premium badges, and luxury accents—not large text blocks.

What is Khaki?

Khaki (#F0E68C) lands as a pale yellow—balanced enough for summer campaign creatives. Its RGB mix (240, 230, 140) skews toward balanced yellow work—especially summer campaign creatives.

What is Lemon?

Reach for Lemon (#FFF700) when you need a pale yellow that feels vivid. Around HSL(58, 100%, 50%), it stays useful for warm paper backgrounds.

What is Mustard?

Mustard (#FFDB58) is a muted yellow with warmth. Vintage and culinary brands love it for packaging and UI accents.

What is Amber?

Amber (#FFBF00) sits between yellow and orange. Strong for alerts, highlights, and energy brand marks.

What is Cream?

Cream (#FFFDD0) is a soft off-yellow white. Warmer than #FFF for paper-like reading surfaces.

What is Saffron?

Saffron (#F4C430) is a rich yellow-orange spice color. Cultural and culinary branding, festive accents.

What is Goldenrod?

Reach for Goldenrod (#DAA520) when you need a light yellow that feels vivid. Around HSL(42, 74%, 49%), it stays useful for warm paper backgrounds.

More Yellow color definitions

Yellow (#FFFF00): Yellow (#FFFF00) is a pale yellow with a vivid character. It pairs well with neutrals and holds up in warm paper backgrounds.
Dark Goldenrod (#B8860B): Dark Goldenrod (#B8860B) reads as a vivid mid-tone yellow in digital palettes. On screens it stays readable for summer campaign creatives when contrast is checked.
Pale Goldenrod (#EEE8AA): Designers pick Pale Goldenrod (#EEE8AA) as a pale yellow accent with a balanced vibe. It pairs well with neutrals and holds up in attention and warning badges.
Dark Khaki (#BDB76B): Dark Khaki (#BDB76B) is a light yellow with a balanced character. Around HSL(55, 38%, 58%), it stays useful for attention and warning badges.
Lemon Chiffon (#FFFACD): Lemon Chiffon (#FFFACD) is an extremely pale yellow. Gentle wash for notes, warnings backgrounds, and soft cards.
Light Yellow (#FFFFE0): Reach for Light Yellow (#FFFFE0) when you need a pale yellow that feels muted. It pairs well with neutrals and holds up in premium gold highlights.
Light Goldenrod Yellow (#FAFAD2): Light Goldenrod Yellow (#FAFAD2) reads as a balanced pale yellow in digital palettes. Its RGB mix (250, 250, 210) skews toward balanced yellow work—especially kids and education products.
Cornsilk (#FFF8DC): Designers pick Cornsilk (#FFF8DC) as a pale yellow accent with a muted vibe. Around HSL(47, 100%, 93%), it stays useful for premium gold highlights.
Ivory (#FFFFF0): Ivory (#FFFFF0) lands as a pale yellow—soft enough for summer campaign creatives. On screens it stays readable for energy brand accents when contrast is checked.
Beige (#F5F5DC): Beige (#F5F5DC) is a pale warm neutral. Large-area background color for calm, editorial layouts.
Floral White (#FFFAF0): Floral White (#FFFAF0) brings a muted, pale note to the yellow family. Its RGB mix (255, 250, 240) skews toward muted yellow work—especially energy brand accents.
Old Lace (#FDF5E6): Reach for Old Lace (#FDF5E6) when you need a pale yellow that feels muted. Around HSL(39, 85%, 94%), it stays useful for warm paper backgrounds.
Papaya Whip (#FFEFD5): Papaya Whip (#FFEFD5) reads as a balanced pale yellow in digital palettes. On screens it stays readable for summer campaign creatives when contrast is checked.
Moccasin (#FFE4B5): Designers pick Moccasin (#FFE4B5) as a pale yellow accent with a balanced vibe. It pairs well with neutrals and holds up in attention and warning badges.
Navajo White (#FFDEAD): Navajo White (#FFDEAD) lands as a pale yellow—balanced enough for summer campaign creatives. Its RGB mix (255, 222, 173) skews toward balanced yellow work—especially summer campaign creatives.
Wheat (#F5DEB3): Wheat (#F5DEB3) is a pale yellow with a balanced character. Around HSL(39, 76%, 83%), it stays useful for attention and warning badges.
Bisque (#FFE4C4): Bisque (#FFE4C4) brings a balanced, pale note to the yellow family. On screens it stays readable for kids and education products when contrast is checked.
Blanched Almond (#FFEBCD): Reach for Blanched Almond (#FFEBCD) when you need a pale yellow that feels balanced. It pairs well with neutrals and holds up in premium gold highlights.
Selective Yellow (#FFBA00): Selective Yellow (#FFBA00) lands as a light yellow—vivid enough for summer campaign creatives. On screens it stays readable for energy brand accents when contrast is checked.
Safety Yellow (#EED202): Safety Yellow (#EED202) is a pale yellow with a vivid character. It pairs well with neutrals and holds up in warm paper backgrounds.
Canary (#FFFF99): Canary (#FFFF99) brings a balanced, pale note to the yellow family. Its RGB mix (255, 255, 153) skews toward balanced yellow work—especially energy brand accents.
Laser Lemon (#FFFF66): Laser Lemon (#FFFF66) reads as a high-energy pale yellow in digital palettes. On screens it stays readable for summer campaign creatives when contrast is checked.
Banana Yellow (#FFE135): Designers pick Banana Yellow (#FFE135) as a pale yellow accent with a vivid vibe. It pairs well with neutrals and holds up in attention and warning badges.
Sunglow (#FFCC33): Sunglow (#FFCC33) lands as a pale yellow—vivid enough for summer campaign creatives. Its RGB mix (255, 204, 51) skews toward vivid yellow work—especially summer campaign creatives.
School Bus Yellow (#FFD800): School Bus Yellow (#FFD800) is a pale yellow with a vivid character. Around HSL(50, 100%, 50%), it stays useful for attention and warning badges.
Taxi Yellow (#FCE300): Taxi Yellow (#FCE300) brings a vivid, pale note to the yellow family. On screens it stays readable for kids and education products when contrast is checked.
Champagne (#F7E7CE): Champagne (#F7E7CE) reads as a balanced pale yellow in digital palettes. Its RGB mix (247, 231, 206) skews toward balanced yellow work—especially kids and education products.
Vanilla (#F3E5AB): Designers pick Vanilla (#F3E5AB) as a pale yellow accent with a balanced vibe. Around HSL(48, 74%, 81%), it stays useful for premium gold highlights.
Flax (#EEDC82): Flax (#EEDC82) lands as a pale yellow—balanced enough for summer campaign creatives. On screens it stays readable for energy brand accents when contrast is checked.
Straw (#E4D96F): Straw (#E4D96F) is a pale yellow with a balanced character. It pairs well with neutrals and holds up in warm paper backgrounds.
Jasmine (#F8DE7E): Jasmine (#F8DE7E) brings a balanced, pale note to the yellow family. Its RGB mix (248, 222, 126) skews toward balanced yellow work—especially energy brand accents.
Maize (#FBEC5D): Reach for Maize (#FBEC5D) when you need a pale yellow that feels balanced. Around HSL(54, 95%, 67%), it stays useful for warm paper backgrounds.
Corn (#FBEC5D): Corn (#FBEC5D) reads as a balanced pale yellow in digital palettes. On screens it stays readable for summer campaign creatives when contrast is checked.
Marigold (#EAA221): Marigold (#EAA221) lands as a light yellow—vivid enough for summer campaign creatives. Its RGB mix (234, 162, 33) skews toward vivid yellow work—especially summer campaign creatives.
Dandelion (#F0E130): Dandelion (#F0E130) is a pale yellow with a vivid character. Around HSL(55, 86%, 56%), it stays useful for attention and warning badges.
Minion Yellow (#F5E050): Minion Yellow (#F5E050) brings a balanced, pale note to the yellow family. On screens it stays readable for kids and education products when contrast is checked.
Icterine (#FCF75E): Reach for Icterine (#FCF75E) when you need a pale yellow that feels balanced. It pairs well with neutrals and holds up in premium gold highlights.
Unmellow Yellow (#FFFF66): Unmellow Yellow (#FFFF66) reads as a balanced pale yellow in digital palettes. Its RGB mix (255, 255, 102) skews toward balanced yellow work—especially kids and education products.
Sunshine Yellow (#FFFD37): Designers pick Sunshine Yellow (#FFFD37) as a pale yellow accent with a vivid vibe. Around HSL(59, 100%, 60%), it stays useful for premium gold highlights.
Bright Yellow (#FFEA00): Bright Yellow (#FFEA00) lands as a pale yellow—vivid enough for summer campaign creatives. On screens it stays readable for energy brand accents when contrast is checked.
Cadmium Yellow (#FFF600): Cadmium Yellow (#FFF600) is a pale yellow with a vivid character. It pairs well with neutrals and holds up in warm paper backgrounds.
Aureolin (#FDEE00): Aureolin (#FDEE00) brings a vivid, pale note to the yellow family. Its RGB mix (253, 238, 0) skews toward vivid yellow work—especially energy brand accents.
Citrine (#E4D00A): Reach for Citrine (#E4D00A) when you need a pale yellow that feels vivid. Around HSL(54, 91%, 46%), it stays useful for warm paper backgrounds.
Mikado Yellow (#FFC40C): Mikado Yellow (#FFC40C) reads as a vivid pale yellow in digital palettes. On screens it stays readable for summer campaign creatives when contrast is checked.
Naples Yellow (#FADA5E): Designers pick Naples Yellow (#FADA5E) as a pale yellow accent with a balanced vibe. It pairs well with neutrals and holds up in attention and warning badges.
Stil de Grain (#FADA5E): Stil de Grain (#FADA5E) lands as a pale yellow—balanced enough for summer campaign creatives. Its RGB mix (250, 218, 94) skews toward balanced yellow work—especially summer campaign creatives.
Old Gold (#CFB53B): Old Gold (#CFB53B) is a light yellow with a vivid character. Around HSL(49, 60%, 52%), it stays useful for attention and warning badges.

FAQ

How to use this page?

Copy HEX values or open a yellow in Shade Color to generate matching tints and shades.

What is the most popular shade of yellow?

Gold is often the most requested yellow-family shade for premium accents, badges, and celebratory UI highlights.

What is the base yellow HEX value?

The reference base yellow on this page uses #FFFF00. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Yellow-50 through Yellow-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.