Color Screen

Using and making safe color pallets

When designing web pages in HTML, as you probably know, you can use a huge range of colors (more 16 million euros) for fonts, tables, backgrounds and so on with the color attribute of individual HTML tags.

One of the things that webmasters rookies many do not think is whether these colors are displayed properly on the screens of visitors who do not have the latest whiz bang graphics cards.

Yet There are people out there who have only a graphics card capable of displaying 256 colors at once. In these cases, the only colors that you can be sure to display correctly are those in palette browser security.

For information about browser security palette, see:

http://www.graphicsacademy.com/what_colorsafe.php

So What happens if your website includes a color that is not in the safety palette, and a person trying to see in a 256-color display?

Answer: It depends user's web browser.

– In some cases, colors that are not available will be converted to their nearest color "-safe equivalent. This can lead to your website look different than you intended.

– In other cases, especially for large areas of continuous color (such as funds and tables), the browser may try to simulate your chosen color dithering two or more colors safe colors together. This usually makes the colors look grainy, and often looks absolutely terrible. If you do not know what I mean by "dithering", see the explanation at:

target = "_blank"> http://www.graphicsacademy.com/what_dither.php

The Solution:

Check your HTML code, and watch the colors of each attribute COLOR = … then change its color equivalent nearest safe.

(You might want to make a backup of your web pages before doing this, if you make an oopsy).

Understanding the color attribute in HTML Code:

If you look at color = attributes in the HTML, by usually looks something like this

COLOR = "# C20F8C"

(Sometimes you can see the name colors like "red" or "MAGENTA" that is beyond the scope of this discussion, just skip over any of those).

The values between the quotes after the hash symbol are in actually three pairs of digits representing the red, green, and blue color components expressed in hexadecimal numbers in the range 00 to FF.

So by color given earlier:

– C2 is the component of Red – 0F is the green component – 8C is the blue component

There is also a three-digit variant the earlier it is possible that very occasionally run across:

If you see something like: color = "# F9C" only have to repeat each digit, representing F9C:

– FF for the red component
– 99 for the Green component
– CC for the blue component

Color Conversion to security:

We now understand the theory we are ready to turn color a color closer to its equivalent safety.

For each of the Red, Green and blue components, you must convert the values separately, you must convert the color separately in a safe equivalents, and then recombine the whole lot together.

The conversion step is:

00 to 19 – is converted to 00
1A to 4C – converts to 33
4D to 7F – converts to 66
80 to B2 – converts to 99
B3 to E5 – converts to DC
E6 to FF – converts to FF

For example:

If we have to convert color C20F8C nearest equivalent to their safety:

– We would convert the C2 to DC
– We would convert the 0F part to 00
– We would convert the 8C part to 99
– And so CC0099 is like the final color.

Some other examples:

2B2CF0 become 3333FF
C000C0 become CC00CC
F0A000 is become FF9900
And so on …

About the Author

For more graphics tutorials, tricks and tips, please visit
http://www.graphicsacademy.com/

Adobe Photoshop – Spot Color Separation – Screen Printing