HTML Color Codes

This page contains HTML color codes. Feel free to copy and paste the HTML color codes into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

When you define colors in HTML, the color is determined by the value you provide. For example, to make something yellow, you type background-color:yellow;.

HTML colors are usually defined by their color name or their hexadecimal value, but they can also be defined by their RGB value. If you don't have a clue what I'm talking about, take a look at the explanation on the HTML color page.

HTML Color Examples

Text Color

These examples demonstrate how to specify the text color. You do this with the CSS color property. To choose your own color, use the color picker.

Source CodeResult

Text color defined using the color name.

Text color defined using its hexadecimal value.

Text color defined using its shorthand hexadecimal value.

Text color defined using the RGB color value.

Text color defined using the RGB color percentage value.

Background Color

These examples demonstrate how to specify the background color of an HTML element. You do this with the CSS background-color property.

Source CodeResult

Background color defined using the color name.

Background color defined using its hexadecimal value.

Background color defined using its shorthand hexadecimal value.

Background color defined using the RGB color value.

Background color defined using the RGB color percentage value.

Border Color

These examples demonstrate how to specify the border color of an HTML element. You do this with the CSS border-color property, or the (shorthand) border property.

Note that when creating borders, you need to specify the border width, its style, and its color. This makes the border shorthand property the quickest way of defining your borders. This is because you can define all three properties at once. In other words, if you use the border-color property, you also need to use the border-width and border-style properties (much more to type!)

Source CodeResult

Text border color defined using 'border-width', 'border-style', and 'border-color'.

Text border color defined using the shorthand 'border' property.

Outline Color

The difference between an outline and a border is that, whereas the border is part of the element, an outline is not part of the element. The outline simply draws an outline around the outside of the element.

Source CodeResult

Text outline color defined using 'outline-width', 'outline-style', and 'outline-color'.

Text outline color defined using the shorthand 'outline' property.

Choose a Color

To choose your own colors, use the color picker. You can use the above color codes to get started. Simply replace the color value in the above color codes to your chosen color from the color picker.

What is RGB and Hexadecimal?

For an explanation of RGB and hexadecimal notation, check out the HTML color page.