Loading...

Shades of Yellow

19 named yellow shades with hex codes — click any swatch to copy.

Find Closest Yellow Shade

Enter any hex code to find the nearest named yellow shade.

Yellow radiates optimism, clarity, and sunshine. Pale creams and champagnes are timeless and elegant; bright yellows are the most visible color to the human eye, perfect for warnings and highlights; deep golds and mustards carry a rich, vintage warmth that works beautifully in earthy palettes.

All Yellow Shades

Ivory

#FFFFF0

Light Yellow

#FFFFE0

Lemon Chiffon

#FFFACD

Light Goldenrod

#FAFAD2

Cornsilk

#FFF8DC

Butter Yellow

#FFFCD7

Vanilla

#F3E5AB

Champagne

#FAD6A5

Lemon

#FFF44F

Canary Yellow

#FFEF00

Yellow

#FFFF00

Maize

#FBEC5D

Banana Yellow

#FFE135

Gold

#FFD700

Amber

#FFBF00

Mustard

#FFDB58

Goldenrod

#DAA520

Dark Goldenrod

#B8860B

Dark Yellow

#9B870C

Using Yellow Shades in Design

Light shades

Pale yellow shades make excellent backgrounds, hover states, and subtle accents. They keep designs airy without losing the hue's personality.

Mid-range shades

The middle of the yellow spectrum is where most UI elements live — buttons, icons, links, and borders. These shades are vivid enough to pop without overwhelming.

Dark shades

Deep yellow shades work for text on light backgrounds, dark mode surfaces, and dramatic hero sections. They're rich and authoritative.

Building a palette

Pick one yellow shade as your primary, one light variant for backgrounds, and one dark variant for depth. Add a neutral gray for balance.

Related Color Families