HTML Red Code

This page contains HTML code for coloring an element red. You can have red text, a red background, or a border around an element.

Red Text

This example uses inline styles to set the text color to red (i.e. I use the style attribute against the HTML element).

In this case, I apply the styles against a <div> tag, but I could just have easily applied them against a <div> tag (for all text within that element) or even a <body> tag (for all text on the page).

Source Code	Result
<p style="color:red;">Red text</p>	Red text

Here's the same thing, but this time using embedded styles.

Source Code	Result
<style scoped> .redText {color:red;} </style> <p class="redText">Red text</p>	Red text

You could also place the CSS code into a external style sheet.

Red Background Color

You can set the background color of an element to red by using the CSS background-color property or the background shorthand property.

In this example, I've placed text inside a <div> tag, set its background color to red, and set its text color to white.

Source Code	Result
<div style="background-color:red;color:white;padding:2%;">White text, red background.</div>	White text, red background.

Red Border Color

In this example, I've added a red dotted border around a <div> element.

Source Code	Result
<div style="border:1px dotted red;padding:2%;"> I have a red dotted border. </div>	I have a red dotted border.

Red Color Codes

The above examples use red as the color value. I could just as easily used the hexadecimal or RGB color values and the result would've been the same.

Here are the various methods of specifying the color red in HTML.

Source Code	Result
<p style="color:red;">Red text</p> <p style="color:#ff0000;">Red text (hexadecimal #ff0000)</p> <p style="color:#f00;">Red text (hexadecimal shorthand #f00)</p> <p style="color:rgb(255,0,0);">Red text (RGB value rgb(255,0,0))</p>	Red text Red text (hexadecimal #ff0000) Red text (hexadecimal shorthand #f00) Red text (RGB value rgb(255,0,0))

Source Code

Result

<p style="color:red;">Red text</p>
<p style="color:#ff0000;">Red text (hexadecimal #ff0000)</p>
<p style="color:#f00;">Red text (hexadecimal shorthand #f00)</p>
<p style="color:rgb(255,0,0);">Red text (RGB value rgb(255,0,0))</p>

Red text

Red text (hexadecimal #ff0000)

Red text (hexadecimal shorthand #f00)

Red text (RGB value rgb(255,0,0))

Shades of Red

Here are some different shades of reds that can be used instead of just plain old "red".

Color Name	Hex Code RGB	Decimal Code RGB
IndianRed	CD5C5C	205,92,92
LightCoral	F08080	240,128,128
Salmon	FA8072	250,128,114
DarkSalmon	E9967A	233,150,122
LightSalmon	FFA07A	255,160,122
Crimson	DC143C	220,20,60
Red	FF0000	255,0,0
FireBrick	B22222	178,34,34
DarkRed	8B0000	139,0,0