Red Color (#FF0000)

#FF0000rgb(255, 0, 0)

Red is a CSS named color defined as hex code #FF0000. Red is the pure red of the sRGB screen: the red channel at full strength with no green or blue. It is the most saturated red a display can show, which makes it a strong signal color.

Color Overview & Formats

CSS: redLuminance: 0.2126
HEX
#FF0000
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
Red (#FF0000) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#FF00006-digit hex web code
RGBrgb(255, 0, 0)Red, Green, Blue channels (0-255)
HSLhsl(0, 100%, 50%)Hue (0°), Saturation (100%), Lightness (50%)
HSV / HSBhsv(0, 100%, 100%)Hue, Saturation (100%), Value/Brightness (100%)
CMYKcmyk(0%, 100%, 100%, 0%)Digital mathematical approximation (non-print)
OKLCHoklch(0.628 0.258 29.2)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #FF0000; /* or red */
  1. Select color format: Choose the desired format (HEX #FF0000, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with black text: Black text on Red reaches 5.25:1 (WCAG AA).

What Colors Go With Red?

These 5 colors all go well with Red (#FF0000), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Red: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

Black

#000000
5.25:1Text-safe

The classic partner: stark, graphic contrast that also gives readable text on red.

White

#FFFFFF
4:1Background / accent

Clean and bold for large headings or icons on a red block; too weak for small text.

Gold

#FFD700
2.85:1Background / accent

A festive, celebratory pairing seen in holiday and luxury packaging.

Navy

#000080
4:1Background / accent

A dark blue counterweight for a patriotic or sporty look.

Ivory

#FFFFF0
3.96:1Background / accent

A warm off-white that softens red without losing punch.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Red (HSL 0°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (0° to 180°), keeping the original saturation and lightness.

Red
#FF0000
Complement (180°)
#00FFFF
Live UI Component Mockup
Component Header SampleBlack text on Red: 5.25:1 (WCAG AA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (330° and 30°), keeping the original saturation and lightness.

Analogous (330°)
#FF0080
Red
#FF0000
Analogous (30°)
#FF8000
Live UI Component Mockup
Component Header SampleBlack text on Red: 5.25:1 (WCAG AA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (120° and 240°), keeping the original saturation and lightness.

Red
#FF0000
Triadic (120°)
#00FF00
Triadic (240°)
#0000FF
Live UI Component Mockup
Component Header SampleBlack text on Red: 5.25:1 (WCAG AA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#FF9999
Tint 30%
#FF4D4D
Red
#FF0000
Shade 30%
#B30000
Shade 60%
#660000
Live UI Component Mockup
Component Header SampleBlack text on Red: 5.25:1 (WCAG AA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Red (#FF0000)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
5.25:1PassPassFail
Pure White (#FFFFFF)
4.00:1FailPassFail
Dark Charcoal (#212529)
3.86:1FailPassFail
Mid Gray (#666666)
1.44:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
5.25:1
Normal: Pass AALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Red Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Red 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#FF0000)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

red = #ff0000 (rgb(255, 0, 0))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for error states, alerts, sale tags and warning icons, and keep it to small areas. On Red, black text passes WCAG AA at every size (5.25:1); white text passes only for large text (4:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Red?

Yes. Black text on Red has a WCAG 2.2 contrast ratio of 5.25:1, which passes AA (4.5:1) for all text sizes but not the stricter AAA level (7:1) for body text.

Can I use white text on Red?

Only for large text. White text on Red has a WCAG 2.2 contrast ratio of 4:1: enough for large text (3:1) but below the 4.5:1 needed for body text.

What colors go with Red?

Black, White, Gold, Navy and Ivory all go well with Red. Black (5.25:1) has enough contrast for text on Red; White, Gold, Navy and Ivory work better as a background or accent.

What is the hex code for red?

The CSS named color red is #FF0000, which is RGB(255, 0, 0). The short form #F00 is the same color.