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

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.