Color on the Web
by Jason Vaughn
This lesson is designed to help you understand the usage of color on the Internet. In this lesson, you will learn about Web safe colors, RGB, CMYK and Hex color. It is recommended that you attend the classroom lectures to get the full understanding of this lesson.
Web-safe colors
In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). The colors that are common to Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode are called "Web-safe". The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a Web-safe color.
Testing, however, reveals that there are only 212 Web-safe colors. Internet Explorer for Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).
All of the color pickers in Dreamweaver use the 212-color Web-safe palette; selecting a color from the palette displays the color's hexadecimal value. While the four colors mentioned previously are not in the Dreamweaver Web-safe palette, you can edit the hexadecimal value in any color field by hand if you want to use them.
To choose a color outside the Web-safe range, click the Palette button in the lower right corner of the Dreamweaver color picker to open the system color picker. The system color picker is not limited to Web-safe colors.
Color on the web can be very limiting. Most users are now running a higher range of colors on their monitors. About 10% of users have their monitors set to 256 colors. Colors outside of Web-safe will still show up in 256 color even though they are out of range. You will get a grainy look (some colors may "gray out") and some photos will have a patchy look to them. When you use the "Save for Web" feature in Adobe Illustrator or Photoshop, you can help correct this problem by using the dither feature. Use your judgment and determine who your audience is before using too many non-Web-safe colors.
Visit this link to learn more about Hex colors and how to make them. http://www.cookwood.com/html4_4e/colors/
The box graphic on the left is a web safe color (256 color setting) This box shows a smooth solid color -- Hex color #9966CC (Web-safe).
The box on the right is non-web safe color viewed in 256 color. This box has a grainy look to it - Hex color (non-Web-safe) #8F5FCD.
Graphic of photo (thousands of color view)
Notice this photo is clean. The dither feature was still used in order to smooth the image, but the quality is very good.
Graphic of photo (256 color view)
Notice the left image is grainy and the right image is patchy. Depending on the amount of colors you use and if you use dither on your image, this is how they might turn out. Experiment with different settings to get a better understanding of your limitations.
RGB / CMYK
Never use CMYK for your Web design. These colors do not show up correctly when converted to RGB. CMYK colors are for print design only and do not offer a wide enough gamma to achieve bright colors or Web-safe colors.
JPEG files support CMYK but GIF and PNG do not. None of your browsers will support files made in CMYK including JPEG. The image will "gray out" or not show up at all.
Make sure you always design with your settings in RGB.
Article posted with permission from:
Art Space Design
