Shades of Yellow
with Hex Codes
Yellow is the brightest colour the human eye can detect — it signals energy, optimism, and warmth. In CSS, the base yellow is #FFFF00, but designers use dozens of variations: deep amber and gold for luxury, bright lemon and lime-yellow for attention-grabbing CTAs, warm honey and mustard for earthy palettes, and soft cream and champagne for elegant backgrounds.
106+Color Shades
1-clickCopy Hex Code
3Filter Categories
Complete List of Yellow Color Shades
Click to copy
HTML
Yellow
#FFFF00
Click to copy
HTML
Gold
#FFD700
Click to copy
HTML
Light Yellow
#FFFFE0
Click to copy
HTML
Lemon Chiffon
#FFFACD
Click to copy
HTML
Light Goldenrod Yellow
#FAFAD2
Click to copy
HTML
Papaya Whip
#FFEFD5
Click to copy
HTML
Moccasin
#FFE4B5
Click to copy
HTML
Peach Puff
#FFDAB9
Click to copy
HTML
Pale Goldenrod
#EEE8AA
Click to copy
HTML
Khaki
#F0E68C
Click to copy
HTML
Dark Khaki
#BDB76B
Click to copy
HTML
Yellow Green
#9ACD32
Click to copy
HTML
Green Yellow
#ADFF2F
Click to copy
HTML
Dark Goldenrod
#B8860B
Click to copy
HTML
Goldenrod
#DAA520
Click to copy
Amber
#FFBF00
Click to copy
Saffron
#F4C430
Click to copy
Canary
#FFFF99
Click to copy
Canary Yellow
#FFEF00
Click to copy
Lemon
#FFF44F
Click to copy
Lemon Yellow
#FFF44F
Click to copy
Butter
#FFFD74
Click to copy
Banana
#FFE135
Click to copy
Sunflower
#FFC512
Click to copy
Honey
#FFC300
Click to copy
Mustard
#FFDB58
Click to copy
Dijon
#C49A00
Click to copy
Cream
#FFFDD0
Click to copy
HTML
Ivory
#FFFFF0
Click to copy
Champagne
#F7E7CE
Click to copy
HTML
Cornsilk
#FFF8DC
Click to copy
Flax
#EEDC82
Click to copy
Straw
#E4D96F
Click to copy
HTML
Wheat
#F5DEB3
Click to copy
HTML
Bisque
#FFE4C4
Click to copy
HTML
AntiqueWhite
#FAEBD7
Click to copy
Blonde
#FAF0BE
Click to copy
Naples Yellow
#FADA5E
Click to copy
Citrine
#E4D00A
Click to copy
Maize
#FBEC5D
Click to copy
Aureolin
#FDEE00
Click to copy
Cadmium Yellow
#FFF600
Click to copy
Crayola Yellow
#FCE883
Click to copy
Flavescent
#F7E98E
Click to copy
Fallow
#C19A6B
Click to copy
Jasmine
#F8DE7E
Click to copy
Jonquil
#F4CA16
Click to copy
Mikado Yellow
#FFC40C
Click to copy
Minion Yellow
#F3E03B
Click to copy
Mellow Yellow
#F8DE7E
Click to copy
Pineapple
#563C0D
Click to copy
Sandstorm
#ECD540
Click to copy
School Bus Yellow
#FFD800
Click to copy
Sunglow
#FFCC33
Click to copy
Titanium Yellow
#EEE600
Click to copy
Vegas Gold
#C5B358
Click to copy
Vanilla
#F3E5AB
Click to copy
Yellow Sunshine
#FFF300
Click to copy
Chrome Yellow
#FFA700
Click to copy
Cyber Yellow
#FFD300
Click to copy
Electric Yellow
#FFFF33
Click to copy
Neon Yellow
#CFFF04
Click to copy
Safety Yellow
#EED202
Click to copy
Laser Lemon
#FFFF66
Click to copy
Unmellow Yellow
#FFFF66
Click to copy
Royal Yellow
#FAE016
Click to copy
Golden Yellow
#FFDF00
Click to copy
Bright Yellow
#FFFD01
Click to copy
Deep Yellow
#FFD300
Click to copy
Dark Yellow
#D5B60A
Click to copy
Pale Yellow
#FFFF99
Click to copy
Warm Yellow
#FFD59A
Click to copy
Cool Yellow
#FDFF98
Click to copy
Indian Yellow
#E3A857
Click to copy
Gamboge
#E49B0F
Click to copy
Raw Sienna
#D2691E
Click to copy
Ochre
#CC7722
Click to copy
Buff
#F0DC82
Click to copy
Ecru
#C2B280
Click to copy
Parchment
#F1E9D2
Click to copy
Brand
IKEA Yellow
#FFDA1A
Click to copy
Brand
Snapchat Yellow
#FFFC00
Click to copy
Brand
McDonald Yellow
#FFC72C
Click to copy
Brand
Ferrari Yellow
#FFD000
Click to copy
Brand
Post-it Yellow
#FFE135
Click to copy
Brand
Caterpillar Yellow
#FFD100
Click to copy
Brand
DHL Yellow
#FFCC00
Click to copy
Brand
Nikon Yellow
#FFE100
Click to copy
Brand
Bumble Yellow
#FCB400
Click to copy
Brand
National Geographic Yellow
#FFCC00
Click to copy
Sport
LA Galaxy Gold
#FFD100
Click to copy
Sport
Pittsburgh Steelers Gold
#FFB612
Click to copy
Sport
Green Bay Packers Gold
#FFB612
Click to copy
Sport
Iowa Hawkeyes Gold
#FFCD00
Click to copy
Sport
Michigan Wolverines Yellow
#FFCB05
Click to copy
Sport
LSU Gold
#FDD023
Click to copy
Sport
Georgia Tech Gold
#B3A369
Click to copy
Sport
Purdue Old Gold
#CFB991
Click to copy
Sport
Army Gold
#B5A268
Click to copy
Sport
Navy Gold
#D4AF37
Click to copy
Sport
Pittsburgh Pirates Yellow
#FBD303
Click to copy
Sport
Oakland Athletics Gold
#EFB21E
Click to copy
Sport
Boston Bruins Gold
#FCB514
Click to copy
Sport
Vegas Golden Knights Gold
#B4975A
Click to copy
Sport
Borussia Dortmund Yellow
#FDE100
Click to copy
Sport
Boca Juniors Yellow
#F5D800
Shades of Yellow — Hex Reference Table
Click any hex code or colour swatch to copy it to your clipboard.
| Preview | Name | Hex Code | RGB | Category |
|---|
How to Use Shades of Yellow in CSS
Every shade on this page can be used directly in CSS. Copy the hex code and paste it into any CSS color property: color, background-color, border-color, box-shadow, or outline-color.
For transparency effects, convert the hex to RGB using the table above and use rgba(). For a design system, store your chosen shade as a CSS custom property so you can update it site-wide from one place.
/* Gold heading */
h1 { color: #FFD700; }
/* Amber button */
.btn { background-color: #FFBF00; color: #1a1a1a; }
/* Lemon with transparency */
.highlight { background-color: rgba(255, 255, 0, 0.15); }
/* CSS custom property */
:root { --brand-yellow: #FFD700; }
Frequently Asked Questions
What is the hex code for yellow?
The pure yellow hex code in HTML/CSS is
#FFFF00. Gold is #FFD700, amber is #FFBF00, lemon is #FFF44F, and mustard is #FFDB58.What are the different shades of yellow called?
Shades of yellow include gold, amber, lemon, mustard, saffron, canary, honey, champagne, cream, butter, sunflower, maize, straw, khaki, citrine, and Naples yellow — each with a distinct hex code.
What is the darkest shade of yellow?
The darkest yellows include dark goldenrod (
#B8860B), golden brown (#996515), and olive (#808000). True dark yellow tends to read as brown or olive to the eye.What is the difference between yellow and gold?
Yellow (
#FFFF00) is the pure spectral colour — very bright and saturated. Gold (#FFD700) is a warmer, richer shade with more red, closer to how metallic gold looks. Gold is far more common in design.How do I use yellow shades in CSS?
Use hex codes directly:
color: #FFD700; for gold, or background-color: #FFBF00; for amber. CSS named yellows include yellow, gold, khaki, darkkhaki, lemonchiffon, and lightyellow.