Shades of yellow

Yellow goes from light yellow (#ffffe0) through gold (#ffd700) to dark khaki (#bdb76b). Here are 11 named yellows with hex codes and contrast figures, and none of them works with white lettering.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#fff7d9White1.1 FailInk16.9 AAA
100#ffeba0White1.2 FailInk15.2 AAA
200#f3d765White1.4 FailInk12.7 AAA
300#dbbc34White1.9 FailInk9.7 AAA
400#be9f00White2.6 FailInk7.0 AAA
500#9e8400White3.6 AA largeInk5.0 AA
600#836d00White5.1 AAInk3.6 AA large
700#685700White7.1 AAAInk2.5 Fail
800#4f4100White10.1 AAAInk1.8 Fail
900#3a3000White13.1 AAAInk1.4 Fail
950#271f00White16.4 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-yellow-50: #fff7d9;
  --color-yellow-100: #ffeba0;
  --color-yellow-200: #f3d765;
  --color-yellow-300: #dbbc34;
  --color-yellow-400: #be9f00;
  --color-yellow-500: #9e8400;
  --color-yellow-600: #836d00;
  --color-yellow-700: #685700;
  --color-yellow-800: #4f4100;
  --color-yellow-900: #3a3000;
  --color-yellow-950: #271f00;
  --color-accent-1: #ffdc4b;
  --color-accent-2: #ccac00;
  --color-accent-3: #655400;
  --color-accent-4: #372d00;
}

At a glance

Light yellow (lightyellow): #ffffe0 · white text 1.01:1 (Fail), near-black text 17.77:1 (AAA); Source: w3.org, checked 2026-11
Lemon chiffon (lemonchiffon): #fffacd · white text 1.06:1 (Fail), near-black text 17.06:1 (AAA); Source: w3.org, checked 2026-11
Light goldenrod yellow (lightgoldenrodyellow): #fafad2 · white text 1.06:1 (Fail), near-black text 16.94:1 (AAA); Source: w3.org, checked 2026-11
Papaya whip (papayawhip): #ffefd5 · white text 1.13:1 (Fail), near-black text 15.99:1 (AAA); Source: w3.org, checked 2026-11
Moccasin (moccasin): #ffe4b5 · white text 1.23:1 (Fail), near-black text 14.66:1 (AAA); Source: w3.org, checked 2026-11
Peach puff (peachpuff): #ffdab9 · white text 1.31:1 (Fail), near-black text 13.77:1 (AAA); Source: w3.org, checked 2026-11
Pale goldenrod (palegoldenrod): #eee8aa · white text 1.25:1 (Fail), near-black text 14.44:1 (AAA); Source: w3.org, checked 2026-11
Khaki (khaki): #f0e68c · white text 1.28:1 (Fail), near-black text 14.13:1 (AAA); Source: w3.org, checked 2026-11
Dark khaki (darkkhaki): #bdb76b · white text 2.06:1 (Fail), near-black text 8.74:1 (AAA); Source: w3.org, checked 2026-11
Gold (gold): #ffd700 · white text 1.40:1 (Fail), near-black text 12.90:1 (AAA); Source: w3.org, checked 2026-11
Yellow (yellow): #ffff00 · white text 1.07:1 (Fail), near-black text 16.85:1 (AAA); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of yellow: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of yellow can carry text

None of these yellow shades takes white body text at WCAG AA (4.5:1). Put near-black text on them, or take a darker step from the scale for text.

Near-black text (#161616) passes on all of them.

Why yellow needs dark text

At full strength yellow is the lightest hue there is. White text on pure yellow (#ffff00) is 1.07:1, close to invisible, while near-black text on it is 16.85:1.

For yellow text on white, you have to leave yellow behind: the scale for gold first passes 4.5:1 with white at step 600 (#836d00), which reads as olive. Most designs use yellow as a background or highlight and keep text dark.

Questions

What are the different shades of yellow?

The named yellows run from light yellow, lemon chiffon and light goldenrod yellow through papaya whip, moccasin, peach puff, pale goldenrod and khaki to dark khaki, gold and pure yellow. Their hex codes are listed above.

What are some shades of yellow colors for a website?

Gold (#ffd700) and khaki (#f0e68c) work as highlight and button colours with dark text. Lemon chiffon (#fffacd) and light yellow (#ffffe0) are soft enough for page or card backgrounds.