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.
Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
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 Code |
Result |
|
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 Code |
Result |
|
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 Code |
Result |
|
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 Code |
Result |
|
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.
