HTML CSS IMAGES LINKS
 
HTML → Web-Safe-Colors

A constant cause for concern when authoring content for the web is the wide range of viewing situations we must take into account. A web site should be tested on different browsers on both Mac and PC computers: Internet Explorer, Netscape, Firefox, and Safari. We often want to test on multiple versions of the same browser. Bandwidth issues must be considered as well: while most web authors surf the web using hi-speed connection (DSL or Cable), most consumers still use a 56k modem. And then we want to think about monitor resolution settings; How wide/tall of a page should we design all depends on the various monitor resolution setting specified by our target audiences which, unless in a controlled environment (such as school, or office), we have no control over. Most designers still design for 800 pixels by 600 Pixels screens. The other monitor related cause for concern is colors. The hue and saturation of colors may shift depending on the maker, age, quality and accuracy of the monitor. Lighting conditions in the room and human vision will also affect the perception of colors. As web-authors we control none of the above. The only control we have over color is how we specify it.

HTML utilizes a Hexadecimal color system. It is based on 16 digits written using the symbols 0-9 and A-F or a-f 0123456789ABCDEF. Hexadecimal values will consist of 6 figures.

While we can specify almost any color using this system, only limited number of combinations will result in a fairly consistent color on both PC and Mac Computers. That is 216 colors, to be exact. Those colors are often referred to as Web-Safe Colors.

White light is made up of 3 colors -- red, green, and blue -- called RGB colors.

The six digits that make up the value of a color are divided into three pairs. Each pair will determine the amount of one of three colors: Red, Green , Blue. In that order.

Being that white contains all other colors, it would make sense that white is the maximum amount of all 3 colors, or FFFFFF. Full Red, Full Green, and Full Blue.

Black is the absence of color, so it should be obvious that black is the least amount of each color possible, or 000000. 0 Red, 0 Green, 0 Blue.

To specify Red you will use all red and no blue or green - or in Hexadecimal: FF0000. Full Red, 0 Green, 0 Blue.

How about blue? 0000FF. No Red, No Green, Full Blue.

As we now know, 000000 is the value for black.
FFFFFF is the value for white

FF0000 is Red

00FF00 is Green

0000FF is blue.

When your hexadecimal code consist of all identical letters or numbers it will generate a grayscale color ranging from white to black depending on the values it contains.

000000

333333

666666

999999

CCCCCC

FFFFFF


Whenever we specify a Hexadecimal value we must place the number sign in front of the value. #FF0099

CSS will accept an abbreviated 3-digit version. Instead of #CCCCCC you may specify #CCC, #339966 will become #396 and so on.

You can make different shades of colors by mixing different values, just like mixing different amounts of paints produce different colors. For example, #0000FF produces a bright shade of blue, while #336699 is a light blue, and #003366 is a dark blue. As the numbers get closer to #000000, the color gets darker.

Rule of thumb- A valid web safe color will have three pairs of values. One for Red, the second for green and the third for blue. Each of the pairs should contain two numbers or letters of the same value (identical values such as 33, ff, 00, 99, 66, cc) Furthermore, you are limited to using only the following numbers and letters: c,f,3,6,9,0. If your hexadecimal color contains any other letters such as d, b, 4,5 it is not web safe.

You do not need to memorize all the different color combinations. In both Adobe Photoshop and ImageReady you may use the color picker to locate and select a color. Photoshop will automatically generate the Hexadecimal value of that color (for you to copy and paste into your HTML code). Further more, you may check the Only web colors box to constrain your color palette to display only web-safe colors.
Photoshop Color Swatches at the bottom of the tool palette



In photoshop, you may click the color swatch at the bottom of the tool palette to select a web-safe-color from the picker.

Based on your selection Photoshop will automatically generate the Hexadecimal value of that color .
Photoshop Color Picker


visit → http://www.webcolors.freeserve.co.uk/chooser.htm
read → http://www.webreference.com/html/reference/color/
read → http://webmonkey.wired.com/webmonkey/00/37/index2a.html

 
  back ↑