The digital world is a colorful place. There are millions of colors available at the disposal of a website or graphic designer. This large number of choices available can end up confusing a novice artist. Often, one may end up not giving much thought to choosing the right color codes or pick colors based on a personal choice.
However, choosing the right color codes is a science as well as an art. Scientifically and technically speaking, you can choose the right colors with mathematical precision, provided one knows the science behind the codes. Likewise, one also needs to be artistic in this choice, since failure to choose the right hues can result in a website or graphic that is gaudy, hard on the eyes and difficult to read.
Keep reading if you want to learn more about color codes, and be sure to check out the color chart later in this post.
Understanding Hex/HTML color codes
The fact that there are more than 16 million color codes to choose from is actually derived from the 256 possible settings of the three primary colors Red, Green and Blue (commonly known as RGB). These are the three main colors from which other colors can be derived. The figure of 16.7 million is arrived at by the mathematical cubing of 256 (256x256x256).
Hexadecimal code is the base-16 numbering system used by computers. To specify a particular color code in hex code, you need to mix red, green and blue (always in this order) by referring to the color code charts table. In the chart, each code is broken into 3 sets of 2 digits each: rr, gg and bb are the two digit pairs controlling the three primary hues. Each of rr, gg and bb can have values none (00) to maximum (ff).
So 100% red is denoted by ff since it is the base 10 system and also because the hexadecimal numerals are 0-9 and a-f. Thus, an example of a red html color will be #ff3333.
Some commonly used color codes from the 16.7 million possible combinations include:
- #ffffff – White (maximum red, maximum green and maximum blue)
- #000000 – Black (no red, no green and no blue)
- #ff0000 – Red (total red with no green and no blue)
- #00ff00 – Green (total green with no red and no blue)
- #0000ff – Blue (total blue with no green and red)
Shades of colors
Now that you know what color codes are, you may be looking for some inspiration for your designs. These lists with shades of colors will help you out. They include color names, Hex, RGB, and CMYK codes:
- Red colors
- Orange colors
- Yellow colors
- Green colors
- Blue colors
- Purple colors
- Pink colors
- Brown colors
- Black colors
- Gray colors
- White colors
Color chart
Here is an overview chart of different colors and their Hex/HTML, RGB and CMYK Codes. Click the image to open it in high resolution and zoom in on it.
Web safe colors
Let us take a look at what web safe colors are. Web safe or browser safe color codes are the 216 colors which appear solid, non dithered and consistent on any monitor. To understand the term “dithering”, set your computer’s monitor to display only 256 or 16 colors. Now you will notice a ‘specking’ display when you surf the Net using this setting. This is known as dithering.
The term web safe or browser safe color is derived from the time when computers only displayed a maximum of 256 colors. Of these, 40 colors were reserved for Windows and Mac systems. Thus, only 216 colors were left that could be displayed without dithering. In order to be web safe, a color must have very specific amounts and combinations of RGB colors, mainly 0%, 20%, 40%, 60%, 80% or 100% or 0, 51, 102, 153, 204, 255. So a web safe shade of red color can have 100% red with 20% each of green and blue (and not 94% red along with 26% green and 14% blue). The latter combination will produce dithering on some systems.
When to use web safe colors
Now that you have learned what web safe colors are, let us look at if and when you should be using them.
If your website design has a solid background, you could make it a web safe color. This will guarantee uniform display on all systems and computer platforms. Even on older computer systems, the background will be displayed in a non-dithered and ‘clean’ manner. In case of web graphics having an invisible background, or images/text images with an invisible background, browser safe colors could prove useful. Web safe colors have also been used for HTML generated text and GIF images to ensure correct color mapping and non-breaking up on color challenged monitors.
Basically, using web safe colors ensure that your web design is intended for audiences that may be having antiquated computer systems. Today, however, looking at the contrast of images etc. is more important than how many colors are actually used, because most screens today have no problem displaying millions of colors.
