You could try a little Utility called ColorCop. It lets you "Pick" a color from the screen to its exact Hex or RGB value.
Both Illustrator and photoshop come with a swatch of pantones that you can use (not sure about imageready or fireworks?). That'd be a good place to start.
However, IMHO, it doesn't really matter what colours you think you are setting on your page - look at your site on 4 different monitors and I bet at least 1 of them will look totally different - usually luminosity settings make your colours either washed out or brighter. I can't get a good colour match between my mac and my PC (4 screens & all are a wee bit different)
So the best advice I can give is to do it by eye and forget trying to get a good match via pantone.
I don't really see a reason why webdesigners should worry about pantones anyway - they are only useful when producing artwork for print.
One other thing - I am pretty sure pantone swatches (hard and electronic) will give you a RGB reference - this might be uesful.
Do a G search for:
pantone hexadecimal values
and the first result will give you a resource site with a conversion tool that will list the RGB and hexadecimal value of any Pantone color.
Note that these are approximations, and as stated above, will vary from one monitor to the next. But it's still a nifty way to get colors as close as possible to their printed counterparts.
Usually I just use the Photoshop color picker to do the conversions, but this site comes in handy when I don't feel like launching Photoshop just to set a background color for an element.
|I've found some tools online but they seem to be so far off in matching the colors. What is the best way to go about trying to come at least close to Pantone colors for a website? |
Pantone makes an application called colorist which is great for finding the majority of standard Pantone colors along with their RGB and Hex values. It's $49.95 USD and is available from Pantone.
Pantone colorist [pantone.com]
|Select PANTONE MATCHING SYSTEMŽ Colors from within your favorite application with PANTONE colorist. Version 2.0 features the latest sRGB, AdobeŽ RGB (1998) and HTML values for the coated, uncoated and matte libraries. Plus, pick the perfect color scheme at InspireME [pantone.com], a dynamic Web utility feature of PANTONE colorist. |
As mentioned above, various programs come default with Pantone swatch libraries. If you are designing for the web, you'll need to use the Coated sRGB color space as this was designed for viewing colors on the web.
You'd be surprised how many different Hex values there are (06) for each of the Pantone colors. If you were to line them up side by side and view them via a monitor, you may not see much of a difference. But, in print is where the differences will be spotted.
Pantone produces a variety of printed color guides that are used in traditional print and other industries. There are coated, uncoated, matte, metallic, pastels, etc. selectors, each one serves a different purpose and it is all relative to the substrate being printed.
For example, let's say your client uses 185 Red for their logo. That 185 Red will look one way on uncoated stock and then another on coated stock. In this case, the client may want to choose 186 Red for coated and 185 Red for uncoated due to the shade differences when using different substrates. 185 Red on a coated stock appears differently than 185 Red on uncoated stock.
The InspireME [pantone.com] web utility that comes with the colorist application is really cool. It gives you various Pantone color palettes based on your primary chosen color. It's a neat little application to have especially if you design websites and need to match Pantone colors as closely as possible.
Remember, it's the coated sRGB color space that you'll want to use for reference on the web.
|I don't really see a reason why webdesigners should worry about pantones anyway - they are only useful when producing artwork for print. |
limbo, they are actually very useful when producing for the web also. When working with clients for their traditional print media, those clients want those same colors to translate to the web. Using the correct Pantone conversion formulas is an important part of the design process.
|limbo, they are actually very useful when producing for the web also. When working with clients for their traditional print media, those clients want those same colors to translate to the web. Using the correct Pantone conversion formulas is an important part of the design process. |
I do agree with that - I suppose I was trying to illustrate the sometimes futile, and more often than not, intuitive look at colours on screen - and to know that even if you match a Pantone 100% on one monitor there is no way to tell how it will look on another.
It's a matter of personal choice I guess. I use Pantones daily for print based work - however the use of Pantones for screen media is wide open to interpretation by the screen in use that it becomes a bit of a minefield and can get you into a:
"the colour you selected on the website looks nothing like the logo on our business cards, I thought you were using a Pantone for this..." conversation with your client.
|"the colour you selected on the website looks nothing like the logo on our business cards, I thought you were using a Pantone for this..." conversation with your client. |
I agree with you 100%. Even at the traditional level with the +/- tolerances on color matching, there will still be issues. That is why you need to clearly indicate to the client that colors on screen are an approximation and may not be representative of what they will see on paper or another substrate.
I've been working with Pantone color guides (previously referred to as PMS Guides) since 1990. Exact color matching is a science in itself and I've done thousands of "draw-downs" for clients. I assist my clients with their color requirements day in and day out. It can be a frustrating experience sometimes trying to explain why the plant did not match the color exactly. It could have been raining that day, too much moisture in the air, pressman was a little hungover from a party the previous night, paper stock sucked up more ink than we expected, etc. I enjoy it immensely!
PageOne, your points are excellent, but your reference to having clients choose 186 Red for one stock and 185 for another is precisely why Pantone makes little sense for the web: you only get one color. You can't feed a higher saturation to dull monitors, or a different hue to color-biased monitors. Maybe in CSS4 ;).
My feeling is always that if you have a serious client (say, someone like Tiffany's), you first explain to them the sheer futility of trying to have a web color that looks the same in every monitor (which they'll ignore or forget... but hey, gotta cover your arse), and then you sit down with them at the most color-correct monitor you can find, in the most optimal lighting situation you can find, and show them variations until they decide which one gives off the best effect. Sometimes the best web version of a print color is a totally different value or saturation level, depending on the effect you're trying to get.
Of course, to get yourself a starting point, you could easily use one of their Pantone colors, or use the color picker off any of their current web colors... or just do it by eye. But the point is to get them to agree on a hex value for the web, just as you get them to agree on a PMS value for their print logo or something like that. Numbers don't lie... I'd feel a lot better telling Tiffany's, "I designed your pop-up ad with #73FFE3, just like you asked", rather than saying "well, i took your PMS color and then upped the saturation 10% because one of the managers said it looked dull on his monitor".
|But your reference to having clients choose 186 Red for one stock and 185 for another is precisely why Pantone makes little sense for the web: you only get one color. |
True. But, at least you have a starting point based on the RGB/Hex values provided by Pantone for that particular spot color. And, since we are dealing with monitors, the coated sRGB color space is the preferred model from Pantone for just this reason.
Yes, monitors are going to be your biggest factor in color. Even if you are viewing on a press ready monitor that is calibrated, the colors are never going to be the same across the spectrum of viewing devices. That is why it is imperative to specify to the client that colors on screen are an approximation only.
When I switched from my CRT Monitor to an LCD Monitor, the difference in colors was dramatic. Due to the backlighting of LCD screens, colors become more vibrant and refined. It is a rather shocking difference to many who have switched.
When it comes to working with color, each one of us is going to have a different perspective. Since I started off in traditional print media, the Pantone Formula Guide has been a reference for me since 1990. When we go live with a new client site, we've taken their Illustrator designed logo and have converted it using the hex values as specified in the Pantone coated sRGB color space. We then create our color palette from there usually working with 2, 3 or 4 primary colors.
There is really nothing wrong with using Pantone for the web as long as you are using the correct sRGB color space.
Well I don't have to worry that I'll have Tiffany's as a client. ;) I just build sites for my own business so I was mostly wanting to use the pantone color combinations as inspiration.
I have one monitor that tends towards yellow so I always check to be sure any color I use looks good on that. I think a color going to the cool side is pretty safe but yellow can make a site look ghastly.
All your suggestions are a great help. Thanks much.
I just wanted to say I'm loving ColorCop. Since I don't have to do exact copies of colors I'm using the Pantone book for inspiration then using ColorCop to help me find the color I want.
I do find a lot of Pantone colors can go yellowish on some monitors so I am taking that into account in deciding on final colors.
Why all this trouble when there are only 216 colours to choose from.
I've dealt with this kind of problem before, too. I just designed a site on my laptop, and was astonished when I viewed it on my desktop LCD monitor. I had expected the colors to be pretty much the same between those two monitors since they basically use the same technology, but there was a drastic difference. What with differences between monitor types, brightness, contrast, color profiles, and other factors, I've finally taken the "if it's close, it's good enough" approach. The problem, of course, is getting the clients to see it that way... ;)
|Why all this trouble when there are only 216 colours to choose from. |
I assume you're talking about "web-safe" colors? If so, that's pretty much out of date. I've never seen a computer and/or monitor (well, not in the last five years at least) that wasn't capable of millions of colors. I just use hex values and leave it at that.
Corel Draw has a great plethora of colour palettes and allows you to toggle between ALL Pantone variations into CMYK RGB and Web colours to find nearest safe match. I use it daily just for that and nothing else then move across to fireworks.
About five years ago there were some schemes attempted to render web colors precisely on upscale sites selling clothing. As I recall, Niemann Marcus or Saks had this for a brief time. The shopper had to go thru a cumbersome calibration routine similar to adjusting a printer.
What is the best way to do color swatches? I just create table cells and try to get the background color about right. Many sites use gifs.
Correct colors are important for apparel, by the way.
I have partially come across this topic, because some customers asked whether some of our products could be imprinted for marketing purposes. What I learned was the difference between the additive vs. subtractive nature of the Pantone/HKS-color spaces on the one hand and the RGB-colorspace on the other.
What about doing any presentation on at least two different monitors, in order to make absolutely clear what problem you're faced with?
|What about doing any presentation on at least two different monitors, in order to make absolutely clear what problem you're faced with? |
Good point. We do exactly that - One on the MAC (tft) one on the PC (CRT) - it's a good way to meet their expectations. No-one will understand until they see it. It's also to good time to show them differences in type, padding, browsers etc too.
I think web safe colours are still important for big area such as background and text colours. Across all my websites 7-10% of my visitors are still using Windows NT, 95, 98 or ME, if their operating system is that old, then so are their PC's that also probably have only 14/15" monitors.
Many businesses still keep PC's for 7 years. So perhaps we ought to still consider websafe colours and 800x600 for at least another 6-12 months.
The colorist is a great tool. You can find them at [colorguides.net...] or [pantone.com...]
The colorist allows you to incorporate all of the 1100+ colors in the graphics palette. The biggest difference is in the lighter shades and pastels. You have a much greater selection with Pantone. This is a big improvement from the color safe palette.I would also recommend calibrating your monitor, using the Pantone huey. Monitors have a great influence on how colors appear, and no two monitors are the same.
|I would also recommend calibrating your monitor. |
My question would be; calibrating to what? There are too many factors involved when calibrating a monitor. Years ago I used to go through a weekly calibration routine with our Radius monitors and it's a tedious process to say the least. Most of the calibrated monitors are going to be found in the designer and print communities.
For many of us, calibration means adjusting the brightness and contrast. Few of us are going to adjust color saturation, hues, etc. We adjust to our eyes and not to a standard for calibration.
I go on press checks regularly and get to see color variations day in and day out. Matching colors exactly is very difficult when you take into consideration all the factors that influence color. The plants I work with are on the higher end and have all the latest gear for color calibration on screen. But, I'm not printing on the screen, I'm printing on paper and it will never look the same.
When it comes to the web, the best option is to let the client choose the primary colors from an industry trusted source on color such as Pantone. What we've done in some instances is provide the client with a selection based on their specified Pantone colors. We show them the conversion values so they can see that they match what Pantone specifies. If the client is not happy with the color on screen, we have them choose another color that they are happy with. Most of the time it's a minor adjustment in the values.
You will still have the issue of color depth supported by a specific monitor. I have noticed that some lower priced displays only support 24-bit color (16,777,216 colors only).
You will find some nice tools at visibone.com. He's got a color swatch comparison tool. [visibone.com...]
[edited by: jatar_k at 7:45 pm (utc) on May 10, 2006]
[edit reason] fixed link [/edit]
The limitations of color gamut aren't discussed in this thread, and this is a very important consideration when choosing colors.
Colors available to the RGB gamut are simply not capable of reproducing some colors in Pantone or CMYK gamuts, and vice-versa. Most of the color conversion tables you will see can only get close. For example, try converting an RGB blue to CMYK, the best you will get is a deep "navy" blue, and it is still miles off from a pure RBG blue.
This is because RGB color is additive, using light as it's "pigment," and CMYK/Pantone colors are subtractive, meaning the color you see is reflected from a colored surface. Due to the limitations in the purity of pigments, this is going to vary from batch to batch and depending on the lighting source.
So to answer the question, How to get a Closer Match for the Web, the colors chosen in the intitial design process should be colors that can easily pass across the intended color gamuts without much variation. If you don't allow this technical requirement to override your artistic intentions, you are going to have inconsistencies with your presentation, and there's not a whole lot you can do about it.
With printing, there is a control set: you know the capabilities and tolerances of your printing equipment. On the Internet, there is no such control.
I spent ten years in the printing industry as a drum scanner operator in the pre-desktop publishing days, and this was indeed one of the most frequent topics of discussion with designers, explaining what happened to their color. :-)
I think worrying about color match only make sense if you have a website targeted at designers and other professionals that deal with color on a day-to-day basis. If it matters to them, they will have their monitors calibrated.
I think for the average webmaster, a much more important - and widely overlooked - aspect of color is the range of variations (color, brightness, contrast) on user monitors.
This can cause a website that looks great on the webmaster's monitor to look horrible on many (or the vast majority) of user monitors.
Is there software or a set of recommendations that will help a webmaster limit color choices to a "safe" set? Years ago there was a "browser-safe palette" but this was based on the constraints of 8-bit display cards, which aren't used very much any more.
The problem I see most often is lack of contrast between text and background. I see menus that are absolutely unreadable that the author thinks are just nifty. (I see this often on the Amazon support forums, where Amazon associates often post URLs of their sites and ask for feedback. They are incredulous when told that their menus are unreadable. Why, it looks just fine on MY monitor!)
Calibrating used to be more difficult. The huey makes it much simpler (5 minutes first time) and then it makes corrections as needed-it stays connected. For most users this is a good solution. BTW, this was developed in conjunction with gretag.
You're right on rocknbil
CMYK/Pantone colors are subtractive. Comparing color using pigments vs light is apples vs. oranges. This will never be a perfect science, but it is the best we can do at the present. It is a big improvement over color safe, though.
|It is a big improvement over color safe, though. |
Definitely! I'm still a big fan of web safe colors and use them day in and day out. Mostly out of habit but I also like the fact that I can use CSS shorthand with the paired color values. This keeps my external CSS files lean.
#ffffff = #fff
#336699 = #369
#000000 = #000
Our company has standardized conversion to this:
1) In PhotoShop create a RGB document.
2) Open the PMS Solid Coated Pallet. Choose the PMS color of choice and fill the document with that color.
3) Use the eyedropper tool and click on the PMS color that just filled the document. There you will see the RGB conversion numbers for what PhotoShop uses for that solid PMS color.
That is what we use and move on, the vast majority of our customers are very happy with that conversion.
A point that is important which has already been stated, there is a vast difference in monitor color rendering so it is impossible to maintain color continuity on the web. The intense scrutiny for color standards is born from the print industry where there is pretty much a closed system that allows for color fidelity. The web is not a closed system and therefore has no baseline from which to create a standard.
I repeat, color continuity can't be done on the web, use one of the industry standard conversion tools like Pantone software or simply use the built-in converter in PhotoShop and move on.