Shades of Yellow

What this tool does

Yellow is pure sunshine, the brightest colour on a screen, running from the palest lemon to a deep, golden glow. It is cheerful and loud, but it is also one of the hardest colours to handle, because it is so light that pale yellows vanish against white and bright yellow tires the eye fast. Getting it right means finding the steps you actually need.

That is what this does. You give it a yellow, and it builds the whole run of that yellow in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named yellows, and the reason yellow grabs your eye faster than any other colour.

How to use it

1. Set your yellow. The tool loads on a yellow and shows its Hex. Change it with Change Color or the Color Picker, or paste the exact yellow you want.
2. Pick how many shades. The Color Shades number sets how many appear, ten to start, and a higher value tightens the gradient.
3. Copy the codes. Each shade comes with its HEX, RGB, HSL, and HSV beside it, ready to use.

Yellow is a bright primary on screen, made of red and green light, so its range stays warm. The lighter steps drift toward pale lemon and cream, while the darker steps deepen into gold, ochre, and olive-brown.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour cleanly instead of just washing it out. It takes your yellow, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Yellow is a tricky one to spread out, because it is already so light that its pale steps turn to near-white quickly. The more useful part of the range is often the darker steps, where the colour gains enough depth to read as gold or ochre and to hold text against a pale background.

The colour you see first

There is a real reason yellow feels so attention-grabbing. In daylight, the human eye is most sensitive to light in the yellow-green part of the spectrum, peaking at a wavelength around 555 nanometres. In plain terms, yellow lands on the exact part of our vision that registers brightness most strongly, so it reads as more luminous and gets noticed faster than any other colour.

That is not a quirk, it is put to work everywhere. Yellow is the colour of school buses, taxis, high-visibility vests, hazard signs, and highlighter pens, all chosen because yellow stands out even in a busy, cluttered scene. So when you use yellow, you are using the single most visible colour there is, which is a power worth spending carefully.

The named yellows, with hex codes

Yellow ranges from soft and creamy to pure and electric. Here are the common yellow names, with a hex for each.

• Yellow (#FFFF00): the pure web primary, yellow at full strength.
• Gold (#FFD700): a warmer, slightly orange, richer yellow.
• Goldenrod (#DAA520): a deeper, earthier golden yellow.
• Khaki (#F0E68C): a soft, muted, slightly greenish yellow.
• Light Yellow (#FFFFE0) and Lemon Chiffon (#FFFACD): very pale, gentle yellows, almost cream.

One practical warning that comes straight from that brightness: pure yellow has so little contrast against white that yellow text on a white background is nearly impossible to read. Yellow works best as a background with dark text on top, or as a bold accent, rather than as text itself.

What yellow says

Yellow is the colour of happiness. It is tied to sunshine, optimism, warmth, and energy, and it is often linked to mental clarity and bright ideas, which is why brands wanting to feel positive, friendly, and creative reach for it. At its best it is simply cheerful in a way few other colours manage.

But yellow has a sharper side too. The same visibility that makes it joyful also makes it the colour of caution, the yellow card, the yellow traffic light, the hazard stripe. In large amounts it can even feel tiring or slightly anxious, and its meaning shifts across cultures, leaning royal in China and more cautionary in parts of Europe. So yellow is cheerful and alert at once, and a little usually goes further than a lot.

Building a palette from your yellow

Yellow has a bold complement: purple, which sits directly opposite it on the wheel and makes a high-energy, striking contrast. For something calmer and more modern, navy, grey, and black all pair beautifully with yellow, letting it pop while keeping the overall look grounded and readable.

To build a working set, use the steps from this tool as the spine: a deep golden yellow for text and depth, your main yellow as the bright accent, and a pale, creamy yellow surface behind content. Keep the brightest yellow for small, deliberate highlights, and lean on neutrals and the darker steps for anything that needs to carry text, since pure yellow cannot.

Questions people ask

What is the hex code for yellow?

The pure web yellow is #FFFF00, full yellow made of red and green light with no blue. It is one of the named CSS colours, so you can also just write "yellow" in your stylesheet, while a specific brand yellow will have its own hex.

Why is yellow so eye-catching?

Because the human eye is most sensitive to yellow-green light in daylight, peaking around 555 nanometres. That makes yellow read as the most luminous, attention-grabbing colour, which is why it is used for school buses, hazard signs, and hi-vis gear.

Why is yellow so hard to read?

Pure yellow has very little contrast against white, so yellow text on white is almost unreadable. Use yellow as a background with dark text, or as an accent, rather than as text on a light background.

Can I use my own yellow?

Yes. Paste your exact yellow in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Yellow, visibility, the spectrum, symbolism, and named web values. Wikipedia. https://en.wikipedia.org/wiki/Yellow