CSS Color: Red
Named CSS color Red — #FF0000 in HEX, rgb(255, 0, 0) in RGB, hsl(0, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Red | color: Red; |
| HEX | #FF0000 | color: #FF0000; |
| RGB | rgb(255, 0, 0) | color: rgb(255, 0, 0); |
| HSL | hsl(0, 100%, 50%) | color: hsl(0, 100%, 50%); |
About Red
Red is one of the most fundamental colors in web design and the first named color most developers learn. Its CSS value `Red` maps to the hex code `#FF0000`, which means the red channel is at full intensity (255) while green and blue are both zero. In HSL terms, the hue sits at 0 degrees with full saturation and 50% lightness.
Red is universally associated with urgency, errors, and danger. In user interfaces it is the standard color for form validation errors, destructive action buttons (like delete or remove), and alert banners. Because of its strong psychological impact, red should be used sparingly to avoid overwhelming users.
From an accessibility standpoint, pure red on a dark background can provide good contrast, but red on white only achieves a contrast ratio of about 4:1, which barely passes WCAG AA for large text and fails for normal text. Consider using darker reds like Crimson or DarkRed when you need text-level contrast against light backgrounds.
Red pairs well with neutral colors like white, black, and gray. In color theory it sits opposite cyan on the color wheel, making teal and cyan its complementary accents.
FAQ
What is the hex code for Red?
The CSS named color Red has the hex code #FF0000. You can use it in CSS as color: #FF0000; or simply color: Red;.
What is Red in RGB?
In RGB notation, Red is rgb(255, 0, 0). Use it in CSS as color: rgb(255, 0, 0);.
What is Red in HSL?
In HSL notation, Red is hsl(0, 100%, 50%). Use it in CSS as color: hsl(0, 100%, 50%);.
What color category is Red?
Red belongs to the Red color family in the CSS named colors specification.
Can I use the name "Red" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Red; or background-color: Red; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Red to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →