By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Colors in HTML and CSS

Brugbarts color reference. How to apply Colors in HTML and CSS.

Edited: 2012-02-03 09:58

There are many ways to declare colors in HTML and CSS, all of which will be explained in this reference.

You can use LBD Color Tool to assist you in finding some colors with a nice contrast.

Usage of Colors

Generally RGB and HSL is better then HEX, in that its easier to read. But it doesn't really matter what you use, as long as you are comfortable using the method.

If a given color cant be rendered by the display device, it will just render the nearest possible color. This can sometimes be a problem, when one platform render the closest color before, and other platforms choses the closest color after the one specified. Obviously this can create some unexpected results, and this was the exact reason we had so called web safe colors.

It rarely happens these days however, so its not something you should obsess about. The worst case-scenario would be that an image, containing the same background color as the page its placed on, might not appear as if the background color is the same, due to the browser handling things differently. Stuff like that.

Color Names

Colors can often be accessed by their english name, there are quite a few predefined keywords, some 16 listed below.

Black: #000000 Green: #008000
Gray: #808080 Lime: #00FF00
Silver: #C0C0C0 Olive: #808000
White: #FFFFFFYellow: #FFFF00
Maroon: #800000 Navy: #000080
Red: #FF0000 Blue: #0000FF
Porple: #800080 Teal: #008080
Fuchsia: #FF00FF Aqua: #00FFFF

Note. This is 16 of the keywords for colors.

Red Green Blue (RGB)

Colors consist of the combination of Red Green And Blue, the maximum value of each is 255. That accounts for 255*255*255 colors, or 16.581.375 possible colors (24bit). Most systems can render all these colors, but some older computers, and hand-held devices are still limited to 8bit (more or less).

Hexadecimals (HEX)

This is the most used way to declare colors. Its not nessosery to know what HEX is, or how to convert HEX to RGB, or RGB to HEX. Nevertheless, you may use below table.

Decimals Hexadecimals
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

Lets take RGB(20, 0, 0) as an example, if we convert this to HEX we get #140000, this is because 16 is the base.

I.E. 16*1+4

If we have a letter to replace a number we use this instead, so #001E00 is equal to 16+14 or G30.

I.E. RGB(0, 30, 0);

If you need to use a value below 16, you need to set "0" in front of the number.

I.E. 15 becomes 0F, and 9 becomes 09. (In HEX)

Example

Example of how to use colors in CSS.

body {
    /* Keywords */
  background: red;
    /* Hex */
  background: #FF0000;
    /* RGB */
  background: rgb(255,0,0);
}

Remember to look up other properties in the reference as needed.