Syntax
Foreground Color
To add color to an HTML element, you use
style="color:{color}", where {color} is the color value. For example:
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:
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:
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):
If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:
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 |
|---|
|
No transparancy
Half transparancy
Lots of transparancy
|
Here's an example of using HSLA to change the opacity.
| Code | Result |
|---|
|
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.
