Black text 19.5:1
Yellow goes from pale Cream and Lemon Chiffon to bold Mustard and School Bus Yellow.
This page lists 36 named shades of yellow with HEX, RGB, HSL and CMYK codes, ready to copy.
Yellow is tricky for text - every swatch shows whether black or white text reads better on it.
Light Yellow - lightest36 shades sorted light to darkdarkest - Selective Yellow
Download all 36 shades of yellow
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Yellow (#FFFF00), evenly spaced in OKLCH lightness, with the darker steps turned 40° warmer so they read as warm browns rather than olive. Paste any other yellow to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)cmyk(0%, 0%, 100%, 0%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #ffff00;
--brand-100: #f6ef00;
--brand-200: #eada00;
--brand-300: #d7bf00;
--brand-400: #bd9e00;
--brand-500: #a68300;
--brand-600: #8e6b00;
--brand-700: #795600;
--brand-800: #654400;
--brand-900: #543600;
--brand-950: #382000;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Yellow (#FFFF00). Click a group to open it on the wheel.
#0000FF Blue
Analogous
Next-door neighbors - calm and harmonious
#FF8000 UT Orange#80FF00 Chartreuse
Triadic
Three evenly spaced hues - bold and balanced
#00FFFF Aqua#FF00FF Fuchsia
Split complementary
The two neighbors of the opposite - contrast with less tension
#0080FF Azure#8000FF Violet
Yellow is the color of sunshine, optimism and attention. It is the lightest of the pure hues, so it pops out from almost any background.
That visibility makes it a warning color: caution signs, taxis and school buses all use it. National School Bus Yellow was standardized in the United States in 1939.
Pantone picked Illuminating, a bright yellow, as one of its two Colors of the Year for 2021, paired with Ultimate Gray.
See yellow in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact yellow? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Yellow is #FFFF00, which is rgb(255, 255, 0) and hsl(60, 100%, 50%). For print it is about 0% cyan, 0% magenta, 100% yellow and 0% black. It is also a CSS color keyword, so you can simply write yellow in your stylesheet.
There is no fixed number - any yellow can be made lighter, darker or more muted. This page lists 36 named shades, from Light Yellow (#FFFFE0) to Selective Yellow (#FFBA00). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any yellow.
Yellow (#FFFF00) has a contrast ratio of 1.07:1 on white and 19.55:1 on black, so it reads best on dark backgrounds or with dark text on top of it. None of the named yellow shades here reach the 4.5:1 minimum on white, so use yellow as a background with dark text instead. Test any pair with the Contrast Checker.
Mustard (#FFDB58) is a warmer, slightly darker yellow with a hint of brown and orange. Pure Yellow (#FFFF00) is the brightest screen yellow, with full red and green and no blue.
Pastel Yellow is usually #FDFD96. Other soft yellows include Lemon Chiffon (#FFFACD), Cream (#FFFDD0) and Light Yellow (#FFFFE0).
Mustard pairs well with navy, deep teal, charcoal and burgundy. For a softer look, combine it with cream and warm browns from shades of beige.