🎨 Shades of Yellow

26 yellow tones, each one click from your clipboard — 16 classic named colors plus a generated tint scale for building UI palettes. Yellow is the fastest color the eye notices against dark backgrounds — taxi livery and warning signs aren't accidents. It carries optimism and cheap-and-cheerful energy in bright doses, warmth and heritage in golds and mustards.

• Dark Goldenrod#b8860b
• Mustard#e1ad01
• Goldenrod#daa520
• Gold#ffd700
• Amber Yellow#ffc000
• Saffron#f4c430
• Yellow#ffff00
• Canary#ffef00
• Lemon#fff700
• Corn#fbec5d
• Banana#ffe135
• Flax#eedc82
• Butter#fffd74
• Pastel Yellow#fdfd96
• Cream#fffdd0
• Ivory#fffff0
• Yellow 100#4e4104
• Yellow 200#746206
• Yellow 300#9b8308
• Yellow 400#c2a30a
• Yellow 500#e9c40c
• Yellow 600#f4d22a
• Yellow 700#f6da51
• Yellow 800#f8e277
• Yellow 900#faeb9e
• Yellow 1000#fcf3c5

Click any swatch to copy its hex code.

Using yellow well

Pure yellow strains eyes at large sizes and vanishes on white — use gold or mustard for text-adjacent roles. Yellow with charcoal is the highest-impact warning pairing; butter and cream serve as sunny neutrals under almost any accent.

Need variations of a specific shade? Copy its hex into the palette generator for harmonies, or the contrast checker to verify text passes WCAG on top of it.

Frequently asked questions

What are the most popular shades of yellow?

The classics are Dark Goldenrod, Mustard, Goldenrod, Gold, Amber Yellow, Saffron — the named swatches at the top of this page. Click any of them to copy the hex code.

What do the numbered shades (100–1000) mean?

They're a generated lightness scale of one representative hue, in the naming style design systems like Tailwind and Material use — low numbers dark, high numbers light. Use them as a ready-made UI ramp.

How do I get RGB or HSL instead of hex?

Copy the hex here, then paste it into our HEX to RGB converter — it returns RGB and HSL together, and the color picker gives sliders for fine-tuning.