« Anaglyphs from Second Life | Main | Process »

Color for the web

I calibrate my monitor monthly with the Gretag/Macbeth Eye-One color calibration system: I hang a meter on my monitor and it takes measurements, makes adjustments, and saves a profile. I've read the documentation on color management available from Adobe and Apple. I check their forums regularly and participate when I can. I've downloaded color profiles from Xerox and HP so that I can create an image in Photoshop and get a match from our Phaser or 5500 to what I see on screen. I'm concerned about color, experiment when I can, and always read new information.

My job duties have started to change. I'm being called on to do much more basic web layout and template design. I usually design for the web in such a way that extreme precision of color doesn't become a necessity and "very close" looks perfect. With new duties, I've been having to match png and jpg images with backgrounds generated by CSS hex and "very close" needs to be perfect. It ain't happenin'.

Photoshop is a controlled color space. My calibrated monitors are a controlled color space. Safari is a controlled color space, though Firefox isn't. When I create an image in Photoshop, I should be abe to "Save for the Web" and get what I want. It looks like I have to start wanting what I get. The standard mantra- "Convert to sRGB before Saving for the Web." -doesn't work; in fact, nothing I've tried- no combination of Photoshop color space/monitor profile/document profile, or even turning off color management, lets me work on exactly the same image everyone will see.

Screen capture showing one color in browser and another in Photoshop.A square of color filled with #003366 (medium warm blue?) can start with an sRGB profile or be converted to one. Saving it for the web (PNG-24), then placing it on a page with #003366 called as the background color, gives me a perfect seamless blend in Safari and Firefox. With that blue page open in the background though, the original image on top of it in the Photoshop workspace looks like a totally different color.Digital Color Meter says they're different colors. When I open the saved PNG file, it matches the original. Digital Color Meter, when held over the color chip in the Photoshop tool bar, says it isn't what Adobe says it is. I can't work like this. This screen cap shows the discrepancy- and Photoshop samples the dark version as the wrong color here, but as #003366 in the actual image.

For years I've avoided Fireworks. Macromedia apps have seemed a bit brittle and if needed I'd use ImageReady. Imageready, though, was matching Photoshop. On a whim, I dropped my Photoshop image into Fireworks. It opened a beautiful duplicate of the image I was seeing behind it in a web browser. Well damn; that's exactly what I need. So the new mantra for me will be "Convert to Fireworks before saving for web."

(I'm using the CS3 Web suite- and luckily Adobe didn't break Fireworks... whew!)

Comments (1)


Dave, I just gotta add that I found this problem in Photoshop & Illustrator @ my last job. I was in awe when using OSX's Digital Color Reader because I was given different hex values than what Photoshop/Illustrator gave me. Actually I remember that Photoshop and Illustrator's values weren't even the same. The values in Photoshop were different than the values in Illustrator. The differing values in Photoshop and Illustrator were both different than the values in Digital Color Reader. I was completely boggled.

I then opened the image in Fireworks and - Ahhhhhhh, the beauty of fireworks - I was getting the same readout as the Digital Color Reader. I was stoked. I then ensured that I pass everything I create in Photoshop and Illustrator through the Fireworks lens to color correct everything to the Digital Color Reader (cause I thought that was the correct hex value approximation).

And then came the merge of Macromedia and Adobe and I was thinking that this merge could fix this color mis-management woe. But nodda. At least luckily, as you have stated, Adobe didn't break the beauty of Fireworks...


Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


This page contains a single entry from the blog posted on May 24, 2007 7:47 AM.

The previous post in this blog was Anaglyphs from Second Life.

The next post in this blog is Process.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33