lightyellow
CSS keyword
On white 1.02:1 · Fail
On black 20.63:1 · AAA
Yellow Colors
Names, HEX, RGB & Contrast
57 named yellow colors, grouped by lightness. Click any value to copy it.
Light
30 colors
beige
CSS keyword
On white 1.11:1 · Fail
On black 18.98:1 · AAA
lemonchiffon
CSS keyword
On white 1.06:1 · Fail
On black 19.81:1 · AAA
lightgoldenrodyellow
CSS keyword
On white 1.07:1 · Fail
On black 19.67:1 · AAA
palegoldenrod
CSS keyword
On white 1.25:1 · Fail
On black 16.76:1 · AAA
khaki
CSS keyword
On white 1.28:1 · Fail
On black 16.4:1 · AAA
off white
On white 1.02:1 · Fail
On black 20.68:1 · AAA
eggshell
On white 1.02:1 · Fail
On black 20.51:1 · AAA
pale
On white 1.07:1 · Fail
On black 19.71:1 · AAA
ecru
On white 1.03:1 · Fail
On black 20.37:1 · AAA
egg shell
On white 1.05:1 · Fail
On black 19.97:1 · AAA
cream
On white 1.03:1 · Fail
On black 20.34:1 · AAA
creme
On white 1.04:1 · Fail
On black 20.23:1 · AAA
light beige
On white 1.04:1 · Fail
On black 20.1:1 · AAA
parchment
On white 1.06:1 · Fail
On black 19.76:1 · AAA
light tan
On white 1.17:1 · Fail
On black 17.93:1 · AAA
buff
On white 1.11:1 · Fail
On black 18.89:1 · AAA
dark cream
On white 1.13:1 · Fail
On black 18.54:1 · AAA
manilla
On white 1.09:1 · Fail
On black 19.27:1 · AAA
pale yellow
On white 1.06:1 · Fail
On black 19.89:1 · AAA
butter
On white 1.06:1 · Fail
On black 19.87:1 · AAA
faded yellow
On white 1.06:1 · Fail
On black 19.82:1 · AAA
yellowish tan
On white 1.08:1 · Fail
On black 19.38:1 · AAA
banana
On white 1.06:1 · Fail
On black 19.86:1 · AAA
light yellow
On white 1.07:1 · Fail
On black 19.71:1 · AAA
custard
On white 1.07:1 · Fail
On black 19.57:1 · AAA
straw
On white 1.13:1 · Fail
On black 18.6:1 · AAA
butter yellow
On white 1.07:1 · Fail
On black 19.55:1 · AAA
sandy yellow
On white 1.19:1 · Fail
On black 17.65:1 · AAA
pastel yellow
On white 1.07:1 · Fail
On black 19.67:1 · AAA
Mid-tone
27 colors
darkkhaki
CSS keyword
On white 2.07:1 · Fail
On black 10.15:1 · AAA
gold
CSS keyword
On white 1.4:1 · Fail
On black 14.97:1 · AAA
yellow
CSS keyword
On white 1.07:1 · Fail
On black 19.56:1 · AAA
canary
On white 1.07:1 · Fail
On black 19.66:1 · AAA
yellowish
On white 1.2:1 · Fail
On black 17.49:1 · AAA
lemon
On white 1.07:1 · Fail
On black 19.6:1 · AAA
banana yellow
On white 1.09:1 · Fail
On black 19.34:1 · AAA
dull yellow
On white 1.4:1 · Fail
On black 15.02:1 · AAA
canary yellow
On white 1.08:1 · Fail
On black 19.5:1 · AAA
lemon yellow
On white 1.07:1 · Fail
On black 19.54:1 · AAA
cement
On white 2.55:1 · Fail
On black 8.25:1 · AAA
sunshine yellow
On white 1.08:1 · Fail
On black 19.36:1 · AAA
off yellow
On white 1.19:1 · Fail
On black 17.63:1 · AAA
sun yellow
On white 1.33:1 · Fail
On black 15.83:1 · AAA
sunny yellow
On white 1.12:1 · Fail
On black 18.81:1 · AAA
dandelion
On white 1.33:1 · Fail
On black 15.77:1 · AAA
sunflower yellow
On white 1.37:1 · Fail
On black 15.28:1 · AAA
bright yellow
On white 1.09:1 · Fail
On black 19.3:1 · AAA
piss yellow
On white 1.53:1 · Fail
On black 13.71:1 · AAA
dark yellow
On white 2:1 · Fail
On black 10.52:1 · AAA
mustard yellow
On white 1.9:1 · Fail
On black 11.02:1 · AAA
dirty yellow
On white 1.81:1 · Fail
On black 11.59:1 · AAA
vomit yellow
On white 1.9:1 · Fail
On black 11.06:1 · AAA
ugly yellow
On white 1.86:1 · Fail
On black 11.31:1 · AAA
puke yellow
On white 1.97:1 · Fail
On black 10.67:1 · AAA
mustard
On white 2.08:1 · Fail
On black 10.07:1 · AAA
brownish yellow
On white 2.17:1 · Fail
On black 9.69:1 · AAA
Copy the whole palette
Every yellow color on this page, ready to paste into your project.
CSS
:root {
--lightyellow: #ffffe0;
--beige: #f5f5dc;
--lemonchiffon: #fffacd;
--lightgoldenrodyellow: #fafad2;
--palegoldenrod: #eee8aa;
--khaki: #f0e68c;
--darkkhaki: #bdb76b;
--gold: #ffd700;
--yellow: #ffff00;
--off-white: #ffffe4;
--eggshell: #ffffd4;
--pale: #fff9d0;
--ecru: #feffca;
--egg-shell: #fffcc4;
--cream: #ffffc2;
--creme: #ffffb6;
--light-beige: #fffeb6;
--parchment: #fefcaf;
--light-tan: #fbeeac;
--buff: #fef69e;
--dark-cream: #fff39a;
--manilla: #fffa86;
--pale-yellow: #ffff84;
--butter: #ffff81;
--faded-yellow: #feff7f;
--yellowish-tan: #fcfc81;
--banana: #ffff7e;
--light-yellow: #fffe7a;
--custard: #fffd78;
--straw: #fcf679;
--butter-yellow: #fffd74;
--sandy-yellow: #fdee73;
--pastel-yellow: #fffe71;
--canary: #fdff63;
--yellowish: #faee66;
--lemon: #fdff52;
--banana-yellow: #fafe4b;
--dull-yellow: #eedc5b;
--canary-yellow: #fffe40;
--lemon-yellow: #fdff38;
--cement: #a5a391;
--sunshine-yellow: #fffd37;
--off-yellow: #f1f33f;
--sun-yellow: #ffdf22;
--sunny-yellow: #fff917;
--dandelion: #fedf08;
--sunflower-yellow: #ffda03;
--bright-yellow: #fffd01;
--piss-yellow: #ddd618;
--dark-yellow: #d5b60a;
--mustard-yellow: #d2bd0a;
--dirty-yellow: #cdc50a;
--vomit-yellow: #c7c10c;
--ugly-yellow: #d0c101;
--puke-yellow: #c2be0e;
--mustard: #ceb301;
--brownish-yellow: #c9b003;
} SCSS
$lightyellow: #ffffe0; $beige: #f5f5dc; $lemonchiffon: #fffacd; $lightgoldenrodyellow: #fafad2; $palegoldenrod: #eee8aa; $khaki: #f0e68c; $darkkhaki: #bdb76b; $gold: #ffd700; $yellow: #ffff00; $off-white: #ffffe4; $eggshell: #ffffd4; $pale: #fff9d0; $ecru: #feffca; $egg-shell: #fffcc4; $cream: #ffffc2; $creme: #ffffb6; $light-beige: #fffeb6; $parchment: #fefcaf; $light-tan: #fbeeac; $buff: #fef69e; $dark-cream: #fff39a; $manilla: #fffa86; $pale-yellow: #ffff84; $butter: #ffff81; $faded-yellow: #feff7f; $yellowish-tan: #fcfc81; $banana: #ffff7e; $light-yellow: #fffe7a; $custard: #fffd78; $straw: #fcf679; $butter-yellow: #fffd74; $sandy-yellow: #fdee73; $pastel-yellow: #fffe71; $canary: #fdff63; $yellowish: #faee66; $lemon: #fdff52; $banana-yellow: #fafe4b; $dull-yellow: #eedc5b; $canary-yellow: #fffe40; $lemon-yellow: #fdff38; $cement: #a5a391; $sunshine-yellow: #fffd37; $off-yellow: #f1f33f; $sun-yellow: #ffdf22; $sunny-yellow: #fff917; $dandelion: #fedf08; $sunflower-yellow: #ffda03; $bright-yellow: #fffd01; $piss-yellow: #ddd618; $dark-yellow: #d5b60a; $mustard-yellow: #d2bd0a; $dirty-yellow: #cdc50a; $vomit-yellow: #c7c10c; $ugly-yellow: #d0c101; $puke-yellow: #c2be0e; $mustard: #ceb301; $brownish-yellow: #c9b003;
Tailwind
theme: {
extend: {
colors: {
"lightyellow": "#ffffe0",
"beige": "#f5f5dc",
"lemonchiffon": "#fffacd",
"lightgoldenrodyellow": "#fafad2",
"palegoldenrod": "#eee8aa",
"khaki": "#f0e68c",
"darkkhaki": "#bdb76b",
"gold": "#ffd700",
"yellow": "#ffff00",
"off-white": "#ffffe4",
"eggshell": "#ffffd4",
"pale": "#fff9d0",
"ecru": "#feffca",
"egg-shell": "#fffcc4",
"cream": "#ffffc2",
"creme": "#ffffb6",
"light-beige": "#fffeb6",
"parchment": "#fefcaf",
"light-tan": "#fbeeac",
"buff": "#fef69e",
"dark-cream": "#fff39a",
"manilla": "#fffa86",
"pale-yellow": "#ffff84",
"butter": "#ffff81",
"faded-yellow": "#feff7f",
"yellowish-tan": "#fcfc81",
"banana": "#ffff7e",
"light-yellow": "#fffe7a",
"custard": "#fffd78",
"straw": "#fcf679",
"butter-yellow": "#fffd74",
"sandy-yellow": "#fdee73",
"pastel-yellow": "#fffe71",
"canary": "#fdff63",
"yellowish": "#faee66",
"lemon": "#fdff52",
"banana-yellow": "#fafe4b",
"dull-yellow": "#eedc5b",
"canary-yellow": "#fffe40",
"lemon-yellow": "#fdff38",
"cement": "#a5a391",
"sunshine-yellow": "#fffd37",
"off-yellow": "#f1f33f",
"sun-yellow": "#ffdf22",
"sunny-yellow": "#fff917",
"dandelion": "#fedf08",
"sunflower-yellow": "#ffda03",
"bright-yellow": "#fffd01",
"piss-yellow": "#ddd618",
"dark-yellow": "#d5b60a",
"mustard-yellow": "#d2bd0a",
"dirty-yellow": "#cdc50a",
"vomit-yellow": "#c7c10c",
"ugly-yellow": "#d0c101",
"puke-yellow": "#c2be0e",
"mustard": "#ceb301",
"brownish-yellow": "#c9b003",
}
}
} Browse other color families
Copied
Yellow color names
Yellow occupies a narrow band, hue 45–65°, but it is the brightest family on screen: pure yellow has the highest perceived luminance of any saturated hue. The named colours here run from pale lemon and cream through gold to mustard.
Using these colors
Yellow is a warning and highlight colour — it draws attention without the alarm red carries. It pairs with charcoal and deep purple, and it is the traditional highlighter colour for good reason. Use it against dark surfaces where it sings, and avoid putting it near white, where it nearly disappears.
Contrast and accessibility
Yellow is the single worst family for text on white — almost every colour here fails WCAG AA, some at under 1.5:1. Treat yellow as a background or accent and put black text on it. On dark backgrounds yellow performs excellently, frequently exceeding AAA.