Jon404.com - Home
Interactive Internet Color Guide
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.
Using the color 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 and Mozilla browsers).
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
Since 2004, there's been discussion that word-based color names could be dropped in future HTML code standards. Hasn't happened yet (2014), but... 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 monitors. 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 2004, 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.
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 Photoshop or Corel, the results are often wildly inaccurate.
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, hold a CMYK color swatch book (get one from your printer) next to the monitor and 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.
The author, Jon Donahue, enjoys art, and can be contacted at... firstname.lastname@example.org ...with any comments or suggestions.
This program is copyrighted. You can make copies for yourself. Permission is granted to make copies for educational use.
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-2012, Jonathon Donahue. All rights reserved.