Colors in HTML and CSS

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: #FFFFFF

Yellow: #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.