About Web Colors
Colors used on websites and other places on the Internet often look like “#FFCC66”. (The “#” may or may not be added, but it’s usually recommended.) The color values are usually three paired values, in this case “FF”, “CC” and “66”. Sometimes colors may look like “#57D2B4”.
That is also valid – as long as the color value contains 6 characters in the range: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Letters may be capitalized or uncapitalized. In CSS you can also use three-character values: “06f” is equal to “0066ff”.
This color system is called hexadecimal and is a standard for colors on the web. ‘Hexadecimal’ comes from Greek and Latin, meaning a numbering system which uses 16 as the base (instead of 10 with decimal numbering). The first two characters represent the red value, then there are two for the green value and two more for the blue value.
White light is built up of these three colors: Red, Green and Blue. If all colors are represented 100%, the color white is the result. So that is three times the highest possible value “FF”, so FFFFFF.
Black equally is three times the lowest value two zeros for R,G, and B: 000000. You can build all kinds of colors this way, for example: FFFF00=yellow; FF6600=orange; FF00FF=purple, etc. View the illustration below!
Mixing Primary Colors: Red,Green,Blue
RGB Colors: [Red,Green,Blue]
Another color system used on the web and in many (web)design applications, is the RGB color system. This is quite similar to the HEX system described above. The values also consist of a red, green and blue respresentation, but are this time more easily readable for humans: values range from 0 to 255. RGB colors are not really a single value like hexadecimal colors, but rather three values bundled together in an array, like this: (255,255,0)
(255,255,255) is white, and (0,0,0) is black. (255,128,0) is orange. By mixing the 256 different (including value 0) RGB color values you can create 256 x 256 x 256 = 16,8 million colors!
So many colors are possible…
The same goes for the hexadecimal system. All characters can have 16 different values, so you can create (16×16)x(16×16)x(16×16) = 256 x 256 x 256 = 16,8 million colors. The representation is just different… (255,255,0) equals FFFF00, and (51,102,204) equals 3366CC. (use the color mixer)
Table with corresponding RGB and HEX color values:
| RGB | HEX | % |
| 0 | 00 | 0 |
| 51 | 33 | 20 |
| 102 | 66 | 40 |
| 153 | 99 | 60 |
| 204 | CC | 80 |
| 255 | FF | 100 |
These are just some of the possible color values, taken at six intervals. By just using 6 different values from the possible 256, you can create 216 colors. This is often enough for websites and Internet applications. These 216 colors are known as the web safe color palette. The next section describes web safe colors.
Web Safe Colors
Web safe colors are made by combining the values displayed in the table above. Using this color palette makes sure that colors look the same on all monitors, browsers and computer systems (down to 8-bit color). Although this is less the issue today, using these colors still has several advantages. The websafe palette is a standard used by many designers and design applications, and contains plenty different colors for most design purposes. Nearly all computer systems, monitors and browsers will display your websites’ colors the same way. Using any other colors like 23AB8D (hex) or (45,186,130) (rgb) may give unexpected and unwanted results! Colors may be dithered to create the color you used (making things unclear or text unreadable). (use the web safe convertor to create websafe colors)
» View a web-safe color chart with color codes
» View the web safe color palette
» View an extended color palette with 4096 colors (may be slow to load)
Enjoy our Color Tools!
We hope you found this article about colors on the web interesting and useful. Enjoy the rest of our website and our many Color Tools!
If you have a website, we would very much appreciate if you link to ColorTools.net! It only takes a second, use our logos on this page if you like (save them to disk).
Also, be sure to check out these other tools for webmasters:
|
|