Shades of Yellow

Shades of yellow include gold, khaki, lemon chiffon, moccasin, mustard, and cream. The base yellow color's hex value in HTML is #FFFF00. Browse named yellows, copy HEX codes, or build a full palette in Shade Color.

All Shades of Yellow

46 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named yellow colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Yellow

#FFFF00 Palette

W 1.1:1 Fail B 19.6:1 AAA

Gold

#FFD700 Palette

W 1.4:1 Fail B 15.0:1 AAA

Goldenrod

#DAA520 Palette

W 2.2:1 Fail B 9.4:1 AAA

Dark Goldenrod

#B8860B Palette

W 3.3:1 Fail B 6.5:1 AA

Pale Goldenrod

#EEE8AA Palette

W 1.3:1 Fail B 16.8:1 AAA

Khaki

#F0E68C Palette

W 1.3:1 Fail B 16.4:1 AAA

Dark Khaki

#BDB76B Palette

W 2.1:1 Fail B 10.1:1 AAA

Lemon Chiffon

#FFFACD Palette

W 1.1:1 Fail B 19.8:1 AAA

Light Yellow

#FFFFE0 Palette

W 1.0:1 Fail B 20.6:1 AAA

Light Goldenrod Yellow

#FAFAD2 Palette

W 1.1:1 Fail B 19.7:1 AAA

Cornsilk

#FFF8DC Palette

W 1.1:1 Fail B 19.7:1 AAA

Ivory

#FFFFF0 Palette

W 1.0:1 Fail B 20.8:1 AAA

Beige

#F5F5DC Palette

W 1.1:1 Fail B 19.0:1 AAA

Floral White

#FFFAF0 Palette

W 1.0:1 Fail B 20.2:1 AAA

Old Lace

#FDF5E6 Palette

W 1.1:1 Fail B 19.4:1 AAA

Mustard

#FFDB58 Palette

W 1.4:1 Fail B 15.5:1 AAA

Amber

#FFBF00 Palette

W 1.7:1 Fail B 12.7:1 AAA

Selective Yellow

#FFBA00 Palette

W 1.7:1 Fail B 12.3:1 AAA

Safety Yellow

#EED202 Palette

W 1.5:1 Fail B 13.9:1 AAA

Canary

#FFFF99 Palette

W 1.0:1 Fail B 20.0:1 AAA

Lemon

#FFF700 Palette

W 1.1:1 Fail B 18.6:1 AAA

Laser Lemon

#FFFF66 Palette

W 1.1:1 Fail B 19.7:1 AAA

Banana Yellow

#FFE135 Palette

W 1.3:1 Fail B 16.1:1 AAA

Sunglow

#FFCC33 Palette

W 1.5:1 Fail B 13.9:1 AAA

School Bus Yellow

#FFD800 Palette

W 1.4:1 Fail B 15.1:1 AAA

Taxi Yellow

#FCE300 Palette

W 1.3:1 Fail B 16.1:1 AAA

Cream

#FFFDD0 Palette

W 1.0:1 Fail B 20.2:1 AAA

Champagne

#F7E7CE Palette

W 1.2:1 Fail B 17.3:1 AAA

Vanilla

#F3E5AB Palette

W 1.3:1 Fail B 16.6:1 AAA

Flax

#EEDC82 Palette

W 1.4:1 Fail B 15.2:1 AAA

Straw

#E4D96F Palette

W 1.5:1 Fail B 14.5:1 AAA

Jasmine

#F8DE7E Palette

W 1.3:1 Fail B 15.7:1 AAA

Corn

#FBEC5D Palette

W 1.2:1 Fail B 17.3:1 AAA

Saffron

#F4C430 Palette

W 1.6:1 Fail B 12.8:1 AAA

Marigold

#EAA221 Palette

W 2.2:1 Fail B 9.7:1 AAA

Dandelion

#F0E130 Palette

W 1.4:1 Fail B 15.5:1 AAA

Minion Yellow

#F5E050 Palette

W 1.3:1 Fail B 15.7:1 AAA

Icterine

#FCF75E Palette

W 1.1:1 Fail B 18.6:1 AAA

Sunshine Yellow

#FFFD37 Palette

W 1.1:1 Fail B 19.4:1 AAA

Bright Yellow

#FFEA00 Palette

W 1.2:1 Fail B 17.0:1 AAA

Cadmium Yellow

#FFF600 Palette

W 1.1:1 Fail B 18.4:1 AAA

Aureolin

#FDEE00 Palette

W 1.2:1 Fail B 17.4:1 AAA

Citrine

#E4D00A Palette

W 1.6:1 Fail B 13.3:1 AAA

Mikado Yellow

#FFC40C Palette

W 1.6:1 Fail B 13.2:1 AAA

Naples Yellow

#FADA5E Palette

W 1.4:1 Fail B 15.3:1 AAA

Old Gold

#CFB53B Palette

W 2.0:1 Fail B 10.3:1 AAA

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Red

Shades of Black

About Shades of Yellow

This page is a named-yellow color card. Light yellows often fail body-text contrast—use the W/B labels before shipping type colors.

Want a full Yellow theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Yellow-50 … 950.
Copy the HEX values into CSS variables for production.

Yellow Shades Glossary

Each named yellow lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Check contrast before using light yellows as text.

Gold: #FFD700 hsl(51, 100%, 50%) W 1.4:1 Fail B 15.0:1 AAA

CSS color: #FFD700; Tailwind bg-[#FFD700]
Khaki: #F0E68C hsl(54, 77%, 75%) W 1.3:1 Fail B 16.4:1 AAA

CSS color: #F0E68C; Tailwind bg-[#F0E68C]
Lemon: #FFF700 hsl(58, 100%, 50%) W 1.1:1 Fail B 18.6:1 AAA

CSS color: #FFF700; Tailwind bg-[#FFF700]
Mustard: #FFDB58 hsl(47, 100%, 67%) W 1.4:1 Fail B 15.5:1 AAA

CSS color: #FFDB58; Tailwind bg-[#FFDB58]
Amber: #FFBF00 hsl(45, 100%, 50%) W 1.7:1 Fail B 12.7:1 AAA

CSS color: #FFBF00; Tailwind bg-[#FFBF00]
Cream: #FFFDD0 hsl(57, 100%, 91%) W 1.0:1 Fail B 20.2:1 AAA

CSS color: #FFFDD0; Tailwind bg-[#FFFDD0]
Saffron: #F4C430 hsl(45, 90%, 57%) W 1.6:1 Fail B 12.8:1 AAA

CSS color: #F4C430; Tailwind bg-[#F4C430]
Goldenrod: #DAA520 hsl(43, 74%, 49%) W 2.2:1 Fail B 9.4:1 AAA

CSS color: #DAA520; Tailwind bg-[#DAA520]
Yellow: #FFFF00 hsl(60, 100%, 50%) W 1.1:1 Fail B 19.6:1 AAA

CSS color: #FFFF00; Tailwind bg-[#FFFF00]
Dark Goldenrod: #B8860B hsl(43, 89%, 38%) W 3.3:1 Fail B 6.5:1 AA

CSS color: #B8860B; Tailwind bg-[#B8860B]
Pale Goldenrod: #EEE8AA hsl(55, 67%, 80%) W 1.3:1 Fail B 16.8:1 AAA

CSS color: #EEE8AA; Tailwind bg-[#EEE8AA]
Dark Khaki: #BDB76B hsl(56, 38%, 58%) W 2.1:1 Fail B 10.1:1 AAA

CSS color: #BDB76B; Tailwind bg-[#BDB76B]
Lemon Chiffon: #FFFACD hsl(54, 100%, 90%) W 1.1:1 Fail B 19.8:1 AAA

CSS color: #FFFACD; Tailwind bg-[#FFFACD]
Light Yellow: #FFFFE0 hsl(60, 100%, 94%) W 1.0:1 Fail B 20.6:1 AAA

CSS color: #FFFFE0; Tailwind bg-[#FFFFE0]
Light Goldenrod Yellow: #FAFAD2 hsl(60, 80%, 90%) W 1.1:1 Fail B 19.7:1 AAA

CSS color: #FAFAD2; Tailwind bg-[#FAFAD2]
Cornsilk: #FFF8DC hsl(48, 100%, 93%) W 1.1:1 Fail B 19.7:1 AAA

CSS color: #FFF8DC; Tailwind bg-[#FFF8DC]
Ivory: #FFFFF0 hsl(60, 100%, 97%) W 1.0:1 Fail B 20.8:1 AAA

CSS color: #FFFFF0; Tailwind bg-[#FFFFF0]
Beige: #F5F5DC hsl(60, 56%, 91%) W 1.1:1 Fail B 19.0:1 AAA

CSS color: #F5F5DC; Tailwind bg-[#F5F5DC]
Floral White: #FFFAF0 hsl(40, 100%, 97%) W 1.0:1 Fail B 20.2:1 AAA

CSS color: #FFFAF0; Tailwind bg-[#FFFAF0]
Old Lace: #FDF5E6 hsl(39, 85%, 95%) W 1.1:1 Fail B 19.4:1 AAA

CSS color: #FDF5E6; Tailwind bg-[#FDF5E6]
Selective Yellow: #FFBA00 hsl(44, 100%, 50%) W 1.7:1 Fail B 12.3:1 AAA

CSS color: #FFBA00; Tailwind bg-[#FFBA00]
Safety Yellow: #EED202 hsl(53, 98%, 47%) W 1.5:1 Fail B 13.9:1 AAA

CSS color: #EED202; Tailwind bg-[#EED202]
Canary: #FFFF99 hsl(60, 100%, 80%) W 1.0:1 Fail B 20.0:1 AAA

CSS color: #FFFF99; Tailwind bg-[#FFFF99]
Laser Lemon: #FFFF66 hsl(60, 100%, 70%) W 1.1:1 Fail B 19.7:1 AAA

CSS color: #FFFF66; Tailwind bg-[#FFFF66]
Banana Yellow: #FFE135 hsl(51, 100%, 60%) W 1.3:1 Fail B 16.1:1 AAA

CSS color: #FFE135; Tailwind bg-[#FFE135]
Sunglow: #FFCC33 hsl(45, 100%, 60%) W 1.5:1 Fail B 13.9:1 AAA

CSS color: #FFCC33; Tailwind bg-[#FFCC33]
School Bus Yellow: #FFD800 hsl(51, 100%, 50%) W 1.4:1 Fail B 15.1:1 AAA

CSS color: #FFD800; Tailwind bg-[#FFD800]
Taxi Yellow: #FCE300 hsl(54, 100%, 49%) W 1.3:1 Fail B 16.1:1 AAA

CSS color: #FCE300; Tailwind bg-[#FCE300]
Champagne: #F7E7CE hsl(37, 72%, 89%) W 1.2:1 Fail B 17.3:1 AAA

CSS color: #F7E7CE; Tailwind bg-[#F7E7CE]
Vanilla: #F3E5AB hsl(48, 75%, 81%) W 1.3:1 Fail B 16.6:1 AAA

CSS color: #F3E5AB; Tailwind bg-[#F3E5AB]
Flax: #EEDC82 hsl(50, 76%, 72%) W 1.4:1 Fail B 15.2:1 AAA

CSS color: #EEDC82; Tailwind bg-[#EEDC82]
Straw: #E4D96F hsl(54, 68%, 66%) W 1.5:1 Fail B 14.5:1 AAA

CSS color: #E4D96F; Tailwind bg-[#E4D96F]
Jasmine: #F8DE7E hsl(47, 90%, 73%) W 1.3:1 Fail B 15.7:1 AAA

CSS color: #F8DE7E; Tailwind bg-[#F8DE7E]
Corn: #FBEC5D hsl(54, 95%, 67%) W 1.2:1 Fail B 17.3:1 AAA

CSS color: #FBEC5D; Tailwind bg-[#FBEC5D]
Marigold: #EAA221 hsl(39, 83%, 52%) W 2.2:1 Fail B 9.7:1 AAA

CSS color: #EAA221; Tailwind bg-[#EAA221]
Dandelion: #F0E130 hsl(55, 86%, 56%) W 1.4:1 Fail B 15.5:1 AAA

CSS color: #F0E130; Tailwind bg-[#F0E130]
Minion Yellow: #F5E050 hsl(52, 89%, 64%) W 1.3:1 Fail B 15.7:1 AAA

CSS color: #F5E050; Tailwind bg-[#F5E050]
Icterine: #FCF75E hsl(58, 96%, 68%) W 1.1:1 Fail B 18.6:1 AAA

CSS color: #FCF75E; Tailwind bg-[#FCF75E]
Sunshine Yellow: #FFFD37 hsl(59, 100%, 61%) W 1.1:1 Fail B 19.4:1 AAA

CSS color: #FFFD37; Tailwind bg-[#FFFD37]
Bright Yellow: #FFEA00 hsl(55, 100%, 50%) W 1.2:1 Fail B 17.0:1 AAA

CSS color: #FFEA00; Tailwind bg-[#FFEA00]
Cadmium Yellow: #FFF600 hsl(58, 100%, 50%) W 1.1:1 Fail B 18.4:1 AAA

CSS color: #FFF600; Tailwind bg-[#FFF600]
Aureolin: #FDEE00 hsl(56, 100%, 50%) W 1.2:1 Fail B 17.4:1 AAA

CSS color: #FDEE00; Tailwind bg-[#FDEE00]
Citrine: #E4D00A hsl(54, 92%, 47%) W 1.6:1 Fail B 13.3:1 AAA

CSS color: #E4D00A; Tailwind bg-[#E4D00A]
Mikado Yellow: #FFC40C hsl(45, 100%, 52%) W 1.6:1 Fail B 13.2:1 AAA

CSS color: #FFC40C; Tailwind bg-[#FFC40C]
Naples Yellow: #FADA5E hsl(48, 94%, 67%) W 1.4:1 Fail B 15.3:1 AAA

CSS color: #FADA5E; Tailwind bg-[#FADA5E]
Old Gold: #CFB53B hsl(49, 61%, 52%) W 2.0:1 Fail B 10.3:1 AAA

CSS color: #CFB53B; Tailwind bg-[#CFB53B]

FAQ

How to use this page?

Copy HEX values or open a yellow in Shade Color to generate matching tints and shades.

What is the most popular shade of yellow?

Gold is often the most requested yellow-family shade for premium accents, badges, and celebratory UI highlights.

What is the base yellow HEX value?

The reference base yellow on this page uses #FFFF00. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Yellow-50 through Yellow-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.