Red Color

About red

#FF0000 is the CSS named color red: the red channel at 255 and green and blue at 0. It is the most saturated red an sRGB screen can display and the reference point for hue 0° on the color wheel.

Pure red is surprisingly weak as text on white: its contrast ratio is just under 4:1, below the 4.5:1 that WCAG AA asks for normal-size text. Error messages and warnings therefore usually use a darker red.

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

Other colors called red

• Firebrick (CSS) #B22222A darker red that is readable as text on white.Copy
• Crimson (CSS) #DC143CA red with a hint of blue, slightly deeper than pure red.Copy

Red shades and tints

Shades mix red 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 red

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

Red contrast and readability

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

For readable red text on white, darken it — firebrick (#B22222) or darkred (#8B0000) pass WCAG AA. Keep #FF0000 for large headlines, icons, badges or backgrounds with white or black text on top.

Using red in CSS and HTML

:root {
  --color-red: #FF0000;
}

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

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

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

<p style="background-color: #FF0000; color: #000000;">
  Red background
</p>