Shades of Yellow: Hex, RGB, and HSL Codes

What counts as a shade of yellow?

Yellow is the brightest hue the eye resolves, and the 16 shades below show how little room it has to move. LightYellow #FFFFE0 and LemonChiffon #FFFACD are nearly white; pure Yellow #FFFF00 is as saturated as the family gets; and from there the only direction is toward gold and olive — Gold #FFD700, Goldenrod #DAA520, DarkGoldenrod #B8860B.

That short range is a practical problem. Yellow cannot be darkened while staying yellow: drop the lightness and it becomes Mustard #FFDB58, then Khaki #F0E68C's muddier cousin DarkKhaki #BDB76B, then something the eye files under brown. Designers who need a dark yellow generally reach for Saffron #F4C430 or Goldenrod instead, which keep the hue readable while giving up the glare.

How to use these color codes

1. Find your shade. The list runs roughly light to dark, with a live preview beside every name — scan it the way you would a paint chart.
2. Click a code to copy. Each row carries the hex, RGB, and HSL value of that color. One click copies that exact string to your clipboard.
3. Paste it into your project. Drop the hex into CSS, Figma, Photoshop, or a document. Clicking the swatch itself copies the hex, so you can grab colors without aiming at the small text.

What yellow communicates

Yellow is the attention color that does not threaten. Warning signs, highlighters, and school buses use it because it holds the highest luminance contrast against black of any hue, staying legible at distance and in poor light where red fails.

It is also the hardest color to use well. Pure #FFFF00 on white is close to unreadable and tires the eye within a paragraph, so yellow usually works as a background or an accent rather than as text. Warmer, deeper versions — Gold, Amber-adjacent Saffron, Maize #FBEC5D — carry the optimism without the strain, which is why they dominate in branding while pure yellow stays on the safety sign.

Honest limitations

A hex code is exact, but the color you see is not. The same #FF0000 looks different on an OLED phone, a cheap office monitor, and a printed page, because each device has its own gamut and calibration. Treat these values as a precise starting point for screens, and always check a physical proof before committing a color to print — CMYK cannot reproduce every shade listed here.

Color names are a mix of two things. Entries badged CSS are official CSS named colors: the name itself works in a stylesheet and every browser resolves it to exactly that hex. The rest are conventional names — Burgundy, Sage, Espresso — that no standards body owns. Their hex values follow the most widely cited convention, but another chart may place them a few percent lighter or darker, so quote the hex rather than the name when the exact value matters.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. This page is a static list of color values rendered in your browser — nothing to install, no account, no premium tier holding back the darker half of the palette. Copy as many codes as you need, as often as you need.

Other color families

redorangegreencyanbluepurplepinkbrowngrayblackwhiteAll color families