HTML Colors

Syntax

Foreground Color

To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:

Code	Result
<h3 style="color:blue"> HTML Colors</h3>	HTML Colors

Background Color

To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:

Code	Result
<h3 style="background-color:orange"> HTML Colors</h3>	HTML Colors

Border Color

To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:

Code	Result
<h3 style="border:1px blue solid;"> HTML Colors</h3>	HTML Colors

Color Names

Beginners may find it easier to specify colors by their color name, as color names are probably a lot easier to remember than the other options. Although color names are easier to remember, the hexadecimal, RGB, and HSL notations provide you with more color options.
Hexadecimal color codes are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.
If you use graphics software, such as Adobe Photoshop or GIMP, you might be used to the RGB or HSL methods.
The chart below shows the 17 color names as specified in the CSS 2.1 specification, along with their corresponding hexadecimal and RGB values.

This table is a small sample of the enormous range of colors available in HTML. To see more, check out HTML Color Codes.

Color Name	Hex Code RGB	Decimal Code RGB
Maroon	800000	128,0,0
Red	FF0000	255,0,0
Orange	FFA500	255,165,0
Yellow	FFFF00	255,255,0
Olive	808000	128,128,0
Green	008000	0,128,0

Color Name	Hex Code RGB	Decimal Code RGB
Purple	800080	128,0,128
Fuchsia	FF00FF	255,0,255
Lime	00FF00	0,255,0
Teal	008080	0,128,128
Aqua	00FFFF	0,255,255
Blue	0000FF	0,0,255

Color Name	Hex Code RGB	Decimal Code RGB
Navy	000080	0,0,128
Black	000000	0,0,0
Gray	808080	128,128,128
Silver	C0C0C0	192,192,192
White	FFFFFF	255,255,255

You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):

Code	Result
<h3 style="color:#0000ff"> HTML Colors</h3>	HTML Colors

If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:

Code	Result
<h3 style="color:#000069"> HTML Colors</h3>	HTML Colors

Transparency

You can also use alpha to specify the level of opacity the color should have. This is only available on RGB and HSL notations. To do this, add the letter "a" to the functional notation (i.e. RGBA and HSLA). For example, rgba(0,0,255,0.5) results in a semi-transparent blue, as does hsla(240, 100%, 50%, 0.5).
Here's an example of using RGBA to change the opacity.

Code	Result
<h3 style="background-color:rgba(0,0,255,1)"> No transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.5)"> Half transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.1)"> Lots of transparancy</h3>	No transparancy Half transparancy Lots of transparancy

Here's an example of using HSLA to change the opacity.

Code	Result
<h3 style="background-color:hsla(240, 100%, 50%, 1)"> No transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.5)"> Half transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.1)"> Lots of transparancy</h3>	No transparancy Half transparancy Lots of transparancy

Choosing Colors - The Easy Way

By using hexadecimal, RGB, or HSL notation, you have a choice of over 16 million different colors. For example, you can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.
But don't worry - you won't need to remember every single hexadecimal color value! The HTML color picker and color chart make it easy for you to choose colors for your website.