Engineering College of Copenhagen Menu Department of Electronics and Information Technology

Colors

Screen colors use the additive color system based on the three basic colors Red, Green, and Blue. This is called the RGB system. Make sure your graphics software is set to use RGB colors, not CMYK colors.

The advantage of the Internet is that it can work with any type of computer. You must realize that users can have very different systems in terms of screen type, size, resolution, number of colors, luminance, contrast, and software facilities.

The three basic colors can be represented by 8 bits each. This gives 24 bits for defining the color of a pixel. 
224 gives 16.8 million combinations.

 Percent  Decimal Hexadecimal

 0%

 0 00
20% 51 33
40% 102 66
60% 153 99
80% 204 CC
100% 255 FF

Even though 24-bits screens are becoming more common, there will still be users with 8 or 16 bits. The common ground is therefore 8 bits, which gives 28 = 256 combinations. Only 216 of these 256 colors are common to all platforms. These are the web-safe colors that you can use as your palette.

The web-safe colors are formed by combining 0, 20, 40, 60, 80 and 100 % of each of the three base colors. Translations of these to decimal and hexadecimal values are shown in the table to the right.

You may use any other colors if you can accept discolorations for some of your readers.

 

The palette of web-safe colors below is sorted by luminance. The luminance determines how easy the colors are to distinguish.

Web-safe colors
The values are hexadecimal in the form RRGGBB
000000 000033 000066 330000 000099 330033 3300CC 0000CC 0000FF 660000 003300 330099 003333 660033 3300CC 660066
003366 3300FF 990000 333300 003399 660099 990033 333333 0033CC 6600CC 333366 990066 6600FF 0033FF 663300 006600
CC0000 990099 333399 006633 CC0033 663333 3333CC 9900CC 663366 006666 CC0066 9900FF 3333FF 993300 336600 FF0000
663399 006699 CC0099 993333 336666 FF0033 0066CC CC00CC 6633CC 336666 993366 FF0066 6633FF 0066FF CC00FF 666600
009900 CC3300 993399 336699 FF0099 009933 666633 CC3333 3366CC 9933CC FF00CC 009966 666666 CC3366 3366FF 9933FF
FF00FF 339900 996600 FF3300 666699 009999 CC3399 996633 339933 FF3333 0099CC 6666CC CC33CC 339966 FF3366 996666
6666FF 0099FF 9933FF 669900 00CC00 CC6600 339999 996699 FF3399 00CC33 669933 CC6633 9966CC 3399CC FF33CC 00CC66
669966 CC6666 3399FF 9966FF FF33FF 33CC00 999900 FF6600 669999 00CC99 CC6699 33CC33 999933 FF6633 00CCCC CC66CC
6699CC 33CC66 FF6666 999966 6699FF 00CCFF CC66FF 66CC00 00FF00 CC9900 33CC99 999999 FF6699 66CC33 00FF33 CC9933
33CCCC 9999CC FF66CC 00FF66 66CC66 CC9966 33CCFF FF66FF 9999FF 33FF00 FF9900 99CC00 00FF99 66CC99 CC9999 99CC33
33FF33 00FFCC FF9933 66CCCC CC99CC 33FF66 99CC66 FF9966 00FFFF 66CCFF CC99FF 66FF00 CCCC00 33FF99 FF9999 99CC99
66FF33 CCCC33 99CCCC 33FFCC FF99CC CCCC66 66FF66 33FFFF 99CCFF FF99FF FF9900 FFCC00 66FF99 CCCC99 99FF33 FFCC33
66FFCC CCCCCC 99FF66 FFCC66 CCCCFF 66FFFF CCFF00 99FF99 FFCC99 CCFF33 99FFCC FFCCCC CCFF66 99FFFF FFCCFF FFFF00
CCFF99 FFFF33 CCFFCC FFFF66 CCFFFF FFFF99 FFFFCC FFFFFF

A boundary between two figures will look flickering if they have the same luminance, but not if they have the same hue. You should therefore make sure that you always have a sufficient difference in luminance between text and background color.

color="#00FF00"
bgcolor="#FF0000" 		 color="#006666"
bgcolor="#00FFFF" 

 This text looks flickering 
because there is no
difference in luminance.
 
This text is easier to read,
even though there is no difference in hue. 
 

 


 A dark text on a white background is optimal for distinguishing small details, but it is fatiguing to the eye.
 
A light text on a dark background is more comfortable to read.
 

If you specify a text color then make sure you also specify a background color, because you cannot be sure that the user has white as default background color.

This page was last modified 2008-Dec-08

← Previous↑ Index