Colors are a vital part of CSS, allowing the user to change the color of text and borders, and the background colors of elements such as text and divs - a fairly major part of design. In this article, I will explain the different syntaxes available - the obvious two are string colours (such as "red" and "black"), and Hex colours (such as #ef0000), and I will also cover RGB and HSL colours, both of which are possible in CSS.

Color names

There are 147 color names defined in the HTML and CSS color specifications which allow you to just type the name of the colour to get the colour. This is a lot easier and a lot more readable.

Here is a table of all the color names in CSS:

aliceblue	antiquewhite	aqua	aquamarine	azure	beige	bisque	black
blanchedalmond	blue	blueviolet	brown	burlywood	cadetblue	chartreuse	chocolate
coral	cornflowerblue	cornsilk	crimson	cyan	darkblue	darkcyan	darkgoldenrod
darkgray	darkgreen	darkkhaki	darkmagenta	darkolivegreen	darkorange	darkorchid	darkred
darksalmon	darkseagreen	darkslateblue	darkslategray	darkturquoise	darkviolet	deeppink	deepskyblue
dimgray	dodgerblue	firebrick	floralwhite	forestgreen	fuchsia	gainsboro	ghostwhite
gold	goldenrod	gray	green	greenyellow	honeydew	hotpink	indianred
indigo	ivory	khaki	lavender	lavenderblush	lawngreen	lemonchiffon	lightblue
lightcoral	lightcyan	lightgoldenrodyellow	lightgray	lightgreen	lightpink	lightsalmon	lightseagreen
lightskyblue	lightslategray	lightsteelblue	lightyellow	lime	limegreen	linen	magenta
maroon	mediumaquamarine	mediumblue	mediumorchid	mediumpurple	mediumseagreen	mediumslateblue	mediumspringgreen
mediumturquoise	mediumvioletred	midnightblue	mintcream	mistyrose	moccasin	navajowhite	navy
oldlace	olive	olivedrab	orange	orangered	orchid	palegoldenrod	palegreen
paleturquoise	palevioletred	papayawhip	peachpuff	peru	pink	plum	powderblue
purple	red	rosybrown	royalblue	saddlebrown	salmon	sandybrown	seagreen
seashell	sienna	silver	skyblue	slateblue	slategray	snow	springgreen
steelblue	tan	teal	thistle	tomato	turquoise	violet	wheat
white	whitesmoke	yellow	yellowgreen

They can be used in any CSS property that accepts a colour value:

color: white;
background-color: black;
border: 2px red solid;

Remember that while it is "grey" in en-GB, CSS uses en-US (hence "color"). You should try to get into the habit of using "gray".

RGB colors

This type of color value is less used than color names and hex colors, but it helps explain hex colors so I'll explain them before. The CSS RGB function allows you to specify the red, blue, and green values of a colour (similar to like in a graphic package such as PhotoShop). For example, the following colours are equal to the color names besides them:

color: rgb(255, 0, 0); /* red */
color: rgb(0, 255, 0); /* lime */
color: rgb(0, 0, 255); /* blue */

color: rgb(0, 128, 0); /* green */
color: rgb(0, 0, 0); /* black */
color: rgb(255, 255, 255); /* white */
color: rgb(128, 128, 128); /* gray */

The RGB function also allows you to specify the values as a percentage of 255. For example, 0% would be 0, 100% would be 255, and 50% would be 128:

color: rgb(100%, 0%, 0%); /* red */
color: rgb(0%, 50%, 0%); /* green */

RGBA colors

In addition to the rgb function, an rgba function was introduced in CSS3. Pretty much all browsers but IE8 and below support it. It allows you, in addition to specifying the rgb values of the color, to specify an alpha transparency:

background-color: rgba(255, 0, 0, 0.7);

That would set the background-color of whatever element is being selected to red, with a opacity of 0.7:

This text is under the div.

This text is over the div.

Hex colors

The other common type of CSS color is the hex value. Hexadecimal is base 16; 0x16 is 22, 0xF is 15, and 0xFF is 255. Hex colors accept three two-digit hexadecimal numbers with no spaces in between, where the first is red out of 255 (0xFF), the second is green out of 255, and the third is blue out of 255.

The following two CSS colors would be the same:

#EFEFEF
rgb(239, 239, 239)

They are case insensitive, meaning that you can write either #efefef or #EFEFEF (or even, for that matter, #eFEfeF; although that isn't too readable).

It is possible to shorten some hex colors to three digits. The following two are equivalent:

#ffffff
#fff

Note that #fff is not equal to #0f0f0f.

HSL colors

The hsl function was introduced alongside the rgba function in CSS3, and has the same browser support.

The function takes three values. The first is the hue, a number between 0 and 360 (inclusive) which should be the number of degrees on the colour wheel. 0 and 360 are red, 120 is green, and 240 is blue - everything else is in between those. This can also be a percentage; 0% would be red, 33% would be green, and 66% would be blue.

The second value is the saturation as a percentage. 100% would be the full color, while 0% would be colorless.

Lightness, the third value, is also a percentage. 0% is black, 100% is white, and 50% is the color. Everything else is relative; 75% would be the light color, and 25% would be a darker color.

The following are all valid hsl values:

color: hsl(0, 100%, 50%); /* red */
color: hsl(120, 100%, 50%); /* lime */
color: hsl(120, 50%, 50%); /* green */

The hsla function

The hsla function, similar to the rgba function, allows you to specify the alpha transparency of the colour. The following would produce the same colour as in the previous transparency example:

background-color: hsl(0, 100%, 50%, 0.7);

Grayscale colors

A hint for the Regex Tuesday Challenge on colors is that a grayscale color has the same red, green, and blue values. The following would be grayscale colors:

#fff
#efefef
#1f1f1f
rgb(0, 0, 0)
rgba(14, 14, 14, 0.9)
hsl(0, 0, 40%)
hsl(0, 40%, 0%)