#F5F0DFUnderstand. 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.
#26364A#C79832Suggested 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.
#FFFF00#F0C300#FFCB60#F0E36B#FFF48D#E8D630#E2BC74#FCDC12#EDD38C#CDCD0D#D0C07A#FBF2B7#EDFF0C#FFFF05#F7FF3C#AD4F09#E6E697#FFFF6B#EF9B0F#EFD242#D1B606#E7F00D#DFFF00#FDEE00#FFF0BC#EFD807#FFE436#FEF86C#C7CF00#F7E269#808000#FEE347#F7E35F#FFDE75#EED153#B3B191#DAB30A#DFAF2C#DD985C#FFD700#FCD21C#B67823#C3B470#A89874#E0CDA9#F3D617#FFFF6B#FAEA73#E1CE9A#E7A854Get the free colour kit: HEX/RGB codes and a project worksheet.