HTML.com’s Guide to Using Color Online

8 Shares

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:

000003006009
00C00F030033
03603903C03F
060063066069
06C06F090093
09609909C09F
0C00C30C60C9
0CC0CF0F00F3
0F60F90FC0FF
300303306309
30C30F330333
33633933C33F
360363366369
36C36F390393
39639939C39F
3C03C33C63C9
3CC3CF3F03F3
3F63F93FC3FF
600603606609
60C60F630633
63663963C63F
660663666669
66C66F690693
69669969C69F
6C06C36C66C9
6CC6CF6F06F3
6F66F96FC6FF
900903906909
90C90F930933
93693993C93F
960963966969
96C96F990993
99699999C99F
9C09C39C69C9
9CC9CF9F09F3
9F69F99FC9FF
C00C03C06C09
C0CC0FC30C33
C36C39C3CC3F
C60C63C66C69
C6CC6FC90C93
C96C99C9CC9F
CC0CC3CC6CC9
CCCCCFCF0CF3
CF6CF9CFCCFF
F00F03F06F09
F0CF0FF30F33
F36F39F3CF3F
F60F63F66F69
F6CF6FF90F93
F96F99F9CF9F
FC0FC3FC6FC9
FCCFCFFF0FF3
FF6FF9FFCFFF

 

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.

8 Shares