All the Colors

Understand. Compare. Create.

Yellow: 50 shades, names and colour codes

Explore yellow shades, HTML and RGB codes, colour meanings and ideas for combining yellow in your projects.

Colour code and CSS reference

The CSS keyword yellow corresponds to #FFFF00. It represents one specific yellow shade, not the entire colour family.

HEX
#FFFF00
RGB
255, 255, 0
CMYK ≈
0%, 0%, 100%, 0%
HSL
60°, 100%, 50%

The displayed CMYK values are estimates without a print profile.

Meaning and perception

Yellow often suggests light and warmth. Lemon yellow appears brighter than ochre, whose brown component softens its presence. Hue alone does not determine text readability.

Which colours go with it?

When pairing yellow, first choose between lemon, soft yellow and ochre. A very light yellow can serve as a background; a saturated yellow readily becomes an accent. Its companion should give the composition structure rather than simply add another bright colour.

Yellow and deep blue: introduce a dark anchor

Deep blue gives ochre or light yellow a visual anchor. For a desk corner, try a blue background and an ochre lamp, or reverse the balance with light walls and a small blue cabinet. On a cover, give yellow a simple area and place the title on a surface with verified contrast.

Yellow and grey: avoid a flat combination

Against medium grey, bright yellow is easier to control as a distinct detail than as an equally important background. Add a lightness difference as well: charcoal, pearl grey and yellow need a different balance from two mid-tones. In a room, woven material or wood can add interest without introducing more colours.

Yellow and green: from lemon to olive

Straw yellow with olive creates a more muted pairing than lemon with vivid green. The former can sit alongside linen and wood; the latter suits a more assertive graphic direction. If the colours visually merge, add a light or dark separation instead of increasing their saturation further.

Use yellow as a background or in lettering

A yellow block can carry dark lettering and become a useful orientation point. The reverse needs more care: pale-yellow letters on white may lack contrast. For a button, test its boundary against the page and its label against its own background separately. A noticeable element is not necessarily a readable one.

Try this palette: ochre, ink and ivory

On a mainly ivory surface, use ink to establish structure and ochre to highlight one area. A starting balance of 70% ivory, 20% ink and 10% ochre makes the different roles easy to assess.

Ivory#F5F0DF
Ink blue#26364A
Ochre#C79832

Suggested palette with copyable HEX codes for your own trials. These sRGB previews are not certified paint or textile specifications.

A common trap: judging yellow in only one light

Before painting, place a sample beside the floor, curtains and a white surface. Observe it at different times and under the lamps you will actually use. Rather than picking the most appealing yellow in isolation, choose the one that works with the materials already there.

Shades of yellow

The names and previews below come from the site’s shade directory. Several codes may share a common name; these shades are not certified RAL or Pantone equivalents.

Yellow#FFFF00
Amber#F0C300
Aurora#FFCB60
Butter#F0E36B
Fresh butter#FFF48D
Corn#E8D630
Blond#E2BC74
Buttercup#FCDC12
Buff#EDD38C
Goose-dropping yellow#CDCD0D
Chamois#D0C07A
Champagne#FBF2B7
Chrome yellow#EDFF0C
Chrome yellow#FFFF05
Lemon#F7FF3C
Tawny#AD4F09
Flave#E6E697
Sulphur yellow#FFFF6B
Gamboge#EF9B0F
Yellow aureolin#EFD242
Yellow banana#D1B606
Canary yellow#E7F00D
Yellow chartreuse#DFFF00
Aureolin#FDEE00
Naples yellow#FFF0BC
Yellow gold#EFD807
Imperial yellow#FFE436
Yellow mimosa#FEF86C
Yellow mustard#C7CF00
Yellow nankin#F7E269
Yellow olive#808000
Straw yellow#FEE347
Yellow chick#F7E35F
Corn#FFDE75
Mars yellow#EED153
Mastic#B3B191
Honey#DAB30A
Yellow Ochre#DFAF2C
Red ocher#DD985C
Gold#FFD700
Orpiment#FCD21C
Camel#B67823
Cow-tail yellow#C3B470
Cow-tail yellow#A89874
Sand#E0CDA9
Saffron#F3D617
Sulfur#FFFF6B
Topaz#FAEA73
Vanilla#E1CE9A
Venetian#E7A854
30 palettes. Your next idea starts here.

Get the free colour kit: HEX/RGB codes and a project worksheet.

Get my free kit →

Also discover: Casekit — customer support for online shops.