Yellow Color

About yellow

#FFFF00 is the CSS named color yellow. On a screen, yellow is made by mixing red and green light at full intensity, with no blue. It is the brightest of all fully saturated colors.

That brightness is also its limitation: yellow on white has a contrast ratio close to 1:1 and is nearly invisible. Paired with black, on the other hand, it gives one of the highest-contrast combinations there is — the reason warning signs and highlighters use it.

#FFFF00 is the value of the CSS named color yellow, defined in the CSS Color specification and identical in every browser.

Other colors called yellow

• Light yellow (CSS) #FFFFE0A barely-there yellow for backgrounds.Copy
• Gold (CSS) #FFD700A warmer, slightly orange yellow.Copy

Yellow shades and tints

Shades mix yellow with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with yellow

Color harmonies based on the hue of #FFFF00: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Yellow contrast and readability

On a yellow background, black text reads best (19.55:1). Here is how yellow works as a text color:

Use yellow as a background or highlight with black text. For yellow-looking text on white, choose a much darker, more golden tone and check the contrast first.

Using yellow in CSS and HTML

:root {
  --color-yellow: #FFFF00;
}

.highlight {
  background-color: var(--color-yellow);
}

.banner {
  background-color: yellow;
  color: #000000;
}

.label {
  color: #FFFF00;
  border: 2px solid rgb(255, 255, 0);
}

<p style="background-color: #FFFF00; color: #000000;">
  Yellow background
</p>