HTML.com’s Guide to Using Color Online

How to use web colors

HTML provides several options for setting colors. You should use CSS to specify all colors as color attributes in HTML are deprecated and generally are no longer supported.

This article assumes you’re working with CSS3. As a result of this, some of the features presented here won’t work in older browsers.

What are the basics?

The most straightforward way to specify any color is with the pound (#) character followed by six case-independent hexadecimal digits.

In case you aren’t familiar with hexadecimal numbers, they’re numbers which use a base of 16 rather than 10. The letters A through F represent the “digits” 10 through 15. For a 2-digit number, the value is 16 time the first digit, plus the second digit. The hexadecimal number 3F means 3 * 16 + 15, or 63 in decimal.

The first two digits of a hexadecimal color are the red value, the next two are the green, and the last two represent the blue. Think of “RGB” to remember the order. Smaller values yield darker colors, so #000000 is black while #FFFFFF is white.

A shorter version uses three digits. It’s equivalent to the six-digit format, where each digit is duplicated to give the six-digit version. The value #46A is the same as #4466AA.

The eight-digit version adds a transparency value. In the three and six-digit notations, all colors are fully opaque.

The eight-digit notation has two digits at the end indicating the degree of transparency. A value of 00 indicates a completely transparent color, and ff is completely opaque.
For example, #0000FF88 would be a semi-transparent blue color.

Similarly, you can add one digit of transparency to a three-digit color code. The four-digit value #46A8 defines a semi-transparent color and is equivalent to #4466AA88.

If you prefer, you can use functional notation for a color value, with decimal numbers from 0 to 255.

For example: rgb(250,75,155)

To get an alpha channel, use rgba, and four numbers.
The alpha value, confusingly, is a number from 0 to 1.0, not 0 to 255.

For example: rgba(250,75,155,0.4)

You can also use named colors instead of numeric values.

Colors and CSS

css color properties

Several CSS properties specify colors for different aspects of a page.
The color property is for the foreground color of an object and nothing else.
If you want an element’s area to be filled out with a color, you use the background-color property.
It normally covers the element’s content, padding, and border areas. A third property, border-color, sets the color of a table’s borders.

To specify the text and background colors for a whole page, you could use:

 body {color: #001818;background-color: #EEEEEE} 

Some properties use colors in combination with other values. For example, the border property uses three values: the width, the style, and the color. For example, you would use border: 1px solid #000; to add a black border around the object.

Meanwhile, CSS colors use the sRGB color model.
This is  an “additive” color model, where the red, green, and blue components add together to produce the resulting color.
Unless you’re a color specialist, you don’t need to know how it works in detail.
Using sRGB doesn’t guarantee that a color value will look the same on all devices; most screens and
printers aren’t precisely calibrated and will vary from the ideal.
However, an sRGB color will give you something close to the expected color on any device that’s in working order.

Named colors

Using named colors in CSS gives a couple of advantages. If you have favorites, you don’t have to remember their numeric values, just their names. Other people working on the same page, or trying to create a new one with a similar scheme, will understand your intent better.

Some colors have more than one name; it doesn’t matter which one you use, or whether you use upper or lower case. A misspelled name,unless it happens to match something else, won’t have any effect.

AliceBlue
F0F8FF
AntiqueWhite
FAEBD7
Aqua
00FFFF
Aquamarine
7FFFD4
Azure
F0FFFF
Beige
F5F5DC
Bisque
FFE4C4
Black
000000
BlanchedAlmond
FFEBCD
Blue
0000FF
BlueViolet
8A2BE2
Brown
A52A2A
BurlyWood
DEB887
CadetBlue
5F9EA0
Chartreuse
7FFF00
Chocolate
D2691E
Coral
FF7F50
CornflowerBlue
6495ED
Cornsilk
FFF8DC
Crimson
DC143C
Cyan
00FFFF
DarkBlue
00008B
DarkCyan
008B8B
DarkGoldenrod
B8860B
DarkGray
A9A9A9
DarkGreen
006400
DarkGrey
A9A9A9
DarkKhaki
BDB76B
DarkMagenta
8B008B
DarkOliveGreen
556B2F
DarkOrange
FF8C00
DarkRed
8B0000
DarkSalmon
E9967A
DarkSeaGreen
8FBC8F
DarkSlateBlue
483D8B
DarkSlateGray
2F4F4F
DarkSlateGrey
2F4F4F
DarkTurquoise
00CED1
DarkViolet
9400D3
DeepPink
FF1493
DeepSkyBlue
00BFFF
DimGray
696969
DimGrey
696969
DodgerBlue
1E90FF
FireBrick
B22222
FloralWhite
FFFAF0
ForestGreen
228B22
Fuchsia
FF00FF
Gainsboro
DCDCDC
GhostWhite
F8F8FF
Gold
FFD700
Goldenrod
DAA520
Gray
808080
Grey
808080
Green
008000
GreenYellow
ADFF2F
HoneyDew
F0FFF0
HotPink
FF69B4
IndianRed
CD5C5C
Indigo
4B0082
Ivory
FFFFF0
Khaki
F0E68C
Lavender
E6E6FA
LavenderBlush
FFF0F5
LawnGreen
7CFC00
LemonChiffon
FFFACD
LightBlue
ADD8E6
LightCoral
F08080
LightCyan
E0FFFF
LightGoldenrodYellow
FAFAD2
LightGray
D3D3D3
LightGreen
90EE90
LightGrey
D3D3D3
LightPink
FFB6C1
LightSalmon
FFA07A
LightSeaGreen
20B2AA
LightSkyBlue
87CEFA
LightSlateGray
778899
LightSlateGrey
778899
LightSteelBlue
B0C4DE
LightYellow
FFFFE0
Lime
00FF00
LimeGreen
32CD32
Linen
FAF0E6
Magenta
FF00FF
Maroon
800000
MediumAquamarine
66CDAA
MediumBlue
0000CD
MediumOrchid
BA55F3
MediumPurple
9370DB
MediumSeaGreen
3CB371
MediumSlateBlue
7B68EE
MediumSpringGreen
00FA9A
MediumTurquoise
48D1CC
MediumVioletRed
C71585
MidnightBlue
191970
MintCream
F5FFFA
MistyRose
FFE4E1
Moccasin
FFE4B5
NavajoWhite
FFDEAD
Navy
000080
OldLace
FDF5E6
Olive
808000
OliveDrab
6B8E23
Orange
FFA500
OrangeRed
FF4500
Orchid
DA70D6
PaleGoldenrod
EEE8AA
PaleGreen
98FB98
PaleTurquoise
AFEEEE
PaleVioletRed
DB7093
PapayaWhip
FFEFD5
PeachPuff
FFDAB9
Peru
CD853F
Pink
FFC0CB
Plum
DDA0DD
PowderBlue
B0E0E6
Purple
800080
RebeccaPurple
663399
Red
FF0000
RosyBrown
BC8F8F
RoyalBlue
4169E1
SaddleBrown
8B4513
Salmon
FA8072
SandyBrown
F4A460
SeaGreen
2E8B57
SeaShell
FFF5EE
Sienna
A0522D
Silver
C0C0C0
SkyBlue
87CEEB
SlateBlue
6A5ACD
SlateGray
708090
SlateGrey
708090
Snow
FFFAFA
SpringGreen
00FF7F
SteelBlue
4682B4
Tan
D2B48C
Teal
008080
Thistle
D8BFD8
Tomato
FF6347
Turquoise
40E0D0
Violet
EE82EE
Wheat
F5DEB3
White
FFFFFF
WhiteSmoke
F5F5F5
Yellow
FFFF00
YellowGreen
9ACD32

Web-safe colors

You may have heard of “web-safe” colors. On older computers with 8-bit color, only certain colors could be displayed directly, and others were produced by mixing combinations of these colors. The result was lower resolution. Modern graphics cards produce 24-bit color, so being “web-safe” isn’t a concern for them.

You can specify all web-safe colors with 3-digit notation.

These are the web-safe colors:

000 003 006 009
00C 00F 030 033
036 039 03C 03F
060 063 066 069
06C 06F 090 093
096 099 09C 09F
0C0 0C3 0C6 0C9
0CC 0CF 0F0 0F3
0F6 0F9 0FC 0FF
300 303 306 309
30C 30F 330 333
336 339 33C 33F
360 363 366 369
36C 36F 390 393
396 399 39C 39F
3C0 3C3 3C6 3C9
3CC 3CF 3F0 3F3
3F6 3F9 3FC 3FF
600 603 606 609
60C 60F 630 633
636 639 63C 63F
660 663 666 669
66C 66F 690 693
696 699 69C 69F
6C0 6C3 6C6 6C9
6CC 6CF 6F0 6F3
6F6 6F9 6FC 6FF
900 903 906 909
90C 90F 930 933
936 939 93C 93F
960 963 966 969
96C 96F 990 993
996 999 99C 99F
9C0 9C3 9C6 9C9
9CC 9CF 9F0 9F3
9F6 9F9 9FC 9FF
C00 C03 C06 C09
C0C C0F C30 C33
C36 C39 C3C C3F
C60 C63 C66 C69
C6C C6F C90 C93
C96 C99 C9C C9F
CC0 CC3 CC6 CC9
CCC CCF CF0 CF3
CF6 CF9 CFC CFF
F00 F03 F06 F09
F0C F0F F30 F33
F36 F39 F3C F3F
F60 F63 F66 F69
F6C F6F F90 F93
F96 F99 F9C F9F
FC0 FC3 FC6 FC9
FCC FCF FF0 FF3
FF6 FF9 FFC FFF

 

If you need a particular color, use it. If the exact shade doesn’t matter, sticking with web-safe colors gives you better compatibility with old machines.