Jon's NetColor Internet Color Guide
339
Cross-Browser Values -- in Hex, Color Name, and RGB notation
(to
use with 140 color-name background values... 47,460 possible
combinations)
Pick a background color (click
radio button). Use 'Gainsboro' for a neutral gray background.
Then, scroll
down and look at colored type
to see the effect against different background colors.
Click for user-defined
colors ... and read the color notes
section.
Background colors
Notes (top)
Netcolor.htm is designed to be used in conjunction with Printcolor.pdf. Printcolor shows 247 of the above 339 web colors, arranged on pages that show both CMYK-mode and RGB-mode output from Illustrator 10. If you are going to try to translate web color into printed color, run Printcolor.pdf on the same press that will run the job... to see what will actually happen to your colors before you run the piece.
Using the Netcolor converter
Example 1: you want to see the background effect of a browser safe color, '660033'. Enter the hex code value 660033 in the 'User hex:' box, then click 'Change' to see the new background color in use.
Example 2: you want to find the hex code for your company's purple logo color, RGB 54, 27, 117. Enter the RGB values in the R, G, and B boxes, and click 'Convert' to get the hex code: #361B75. Then, copy-paste the #361B75 hex code into the 'User hex:' box, and click 'Change' to turn the screen background color into your purple logo color. Last step -- scroll down the screen to see how different colors work with your logo color.
If the screen text is hard to read, press the F5 key to refresh and reset the background to neutral gray (works on Internet Explorer, Mozilla, and Firefox browsers).
Note: This page will display properly in Internet Explorer 6 or greater, and in Mozilla or Firefox.
Browser color notation
1. Color names: all the color names listed display the same in both Internet Explorer and Netscape Navigator. You can write HTML that selects colors by name, or by hexadecimal code. Here's an example showing how both methods of color notation produce the same results:
<p><font color="royalblue">RoyalBlue text color</font> </p>
RoyalBlue text color
<p><font color="#4169E1">RoyalBlue text color</font> </p>
RoyalBlue text color
As of 2005, there's some discussion that word-based color names could be dropped in future HTML code standards. To be sure of longevity, you could use hex-code names instead.
RGB-to-hexadecimal-to-colorname equivalents are given to make it easier to match colors between paint programs (RGB notation, like 255,153,204) and webpage-making programs (hex notation, like #FF99CC).
2. In the text color section, colors that start with "-- none --" are browser-compatible. They display without problems on 256-color screens -- like the screens on cell phones and hand-helds, and on older PCs. To tell if a color is browser compatible, look at its RGB code. Must be made from a combination of 0, 51, 102, 153, 204, or 255. If the RGB code includes any other number, it is not strictly browser-compatible. There are 216 browser-compatible colors. As of 2005, this is no longer a design issue, as all monitor screens display 16 million colors. But it is still useful if you are designing webpages to display on color-limited PDA screens, and also if you want to make sure that a color displays the same on both Intel PC and Apple screens.
3. In the text color section, names that are underlined are standard Windows colors. Notice that they are not browser-compatible -- Red, for instance, might undergo a color shift if displayed on a non-Windows computer with a 256-color monitor.
4. In the real world, perfect color control is an impossibility. Mac screens are brighter than PCs (2.2 gamma compared to 1.8). Users view screens under very different ambient lighting -- office fluorescent to tungsten lighbulbs. And, we all seem to perceive color a little differently from each other!
RGB vs. CMYK color models
RGB color is computer screen color, transmitted light, somewhat like a stained-glass window. Monitor color display varies slightly from monitor to monitor. Colors are formed from transmitted Red, Green, and Blue light.
The CMYK color model is a guide for accurately reproducing printed colors on paper. Printers and print designers use printed CMYK color swatches as a common standard on what a color should look like when printed on either glossy or matte paper. CMYK color is made of varying percentages of Cyan, Magenta, Yellow, and Black (K).
There are problems involved in accurately converting RGB colors to CMYK colors. RGB colorspace (the number of colors you can display) is 30% larger than CMYK colorspace, because CMYK has to take into account the limitations of printing inks, and the ability of a press to accurately print halftone gradations of color.
This is not a 'linear' problem -- it does not lend itself to a computer solution. If you convert test color swatches from RGB to CMYK using Illustrator, Photoshop or Corel, the results are often wildly inaccurate (see note above about Printcolor.pdf).
A typical problem occurs when a designer wants to use the same colors in print that are used on a web page. You can try to calibrate your monitor to your color separation vendor's CMYK model... but it is hard to do, continual re-calibration is necessary, and results are inconsistent. Best practice (and much easier) is to:
1. Display the web page on an average PC monitor. Average means middle-of-the-road in price, 800 x 600 resolution, 16 million colors (not 256 colors).
2. Then, use Printcolor.pdf to make a CMYK color swatch book, and hold it next to the monitor to find CMYK colors that look the same as the colors you are tyrying to match. The match will not be exact, but it will be pretty close, and the CMYK values in the print swatch book deliver predictable results on the press.
3. Try to do this in an office environment with normal office lighting. Ambient lighting has a large effect on perceived color, and the brochure or datasheet you are printing will be probably be read in a workplace environment.
RGB vs. Pantone Spot Color models
The Pantone Spot Color system creates color numbers for printing press ink mixtures. Pantone colors are used for simple printing jobs, where you might use only one or two colors, but want to be very specific about the colors. Designers and printers both work from the same Pantone spot color swatch books. The book tells the printer what colors and proportions of standard inks to mix to get the desired spot color.
Usually, a two-color design will use black plus one other color. Caution -- check with your printer if you use screens of two colors, like a 50% screen of reflex blue over a 50% screen of orange. Sometimes, there's an unpredictable chemical interaction. You aren't dealing with predictable mixtures of the CMYK inks here. Talk to your printer before you put one screen atop another.
As for matching RGB screen color to Pantone spot color, hold the spot color swatch book next to the screen, with typical monitor and office lighting conditions. Then pick the closest-match Pantone spot color.
User-defined colors (color table) (top)
If you are working with a set of corporate colors, you can replace the color values for the section below with your own colors. Put this page in an HTML editor, go to the bottom of the page, and substitute your color values for the ones below. Then, run the page in your browser, and move between the top of the page and the bottom to see the effect of different background colors on your color palette.
| ggg | logo, purple | 361B75 | 54, 27, 117 | The QUICK Brown fox |
| ggg | company yellow | FFC300 | 255, 195, 0 | The QUICK Brown fox |
| ggg | company gray | 4F5556 | 79, 85, 86 | The QUICK Brown fox |
| ggg | white | FFFFFF | 255, 255, 255 | The QUICK Brown fox |
| ggg | black | 000000 | 0, 0, 0 | The QUICK Brown fox |
©1999-2006, Jonathon Donahue. All rights reserved.