Normal (Tagged AdobeRGB) - Over (Tagged sRGB) - Click (Tagged AppleRGB), photos courtesy of Getty Images, PhotoDisc®

If the above three rollovers shift color-brightness-gamma, your Web browser is NOT color managed.

If the above three rollovers look virtually identical, your Web browser is color managed — this is happening BECAUSE your color-managed browser is reading each file's embedded profile and Converting or Mapping them to your monitor profile for a theoretical display of True Color.

Above, all three tagged files are in one box to evaluate them together. (These are the same exact files as in the right box except these files have embedded ICC profiles, and the other files do not have profiles attached).

In a NON-MANAGED browser, all three above tagged files (normal/over/click) will display very differently — exactly the same as in the right box — because the UN-MANAGED BROWSER is ignoring the profiles and (wrongly) applying the same default profile to all six pics in both sets.

Normal (UnTagged AdobeRGB) - Over (UnTagged sRGB) - Click (UnTagged AppleRGB)

The above un-tagged files will look very differently in all Web browsers — this is BECAUSE your browser is (in essence) applying the same default profile to each of the three untagged files.

Above, all three un-tagged files are in one box to evaluate them together. (These are the same exact files as in the left box except these files have NO embedded ICC profile).

Un-tagged sRGB (arguably the Web's default color space):

Most people will be able to compare the top, most popular color spaces side-by-side and clearly see the untagged sRGB displays most closely to the True Color (in the left box).

If untagged sRGB is not displaying correctly here, this tutorial will help you understand why and how to troubleshoot color on the Internet — by explaining the basic color theories in simple lay terms.

As a steadfast student of color management theory, I do not think embedding ICC profiles in Web images will be the norm anytime in the near future — moreover — I think Mozilla Firefox 3.6 "Full Color Management" (Value 1) gets the theory exactly correct on the World Wide Web today without even using embedded profiles.

What Firefox does best is, besides reading embedded profiles and converting them to my monitor profile (like Safari does), Firefox goes two very intelligent steps further: 1) Firefox "Defaults" untagged color to sRGB (even on a Mac), and 2) Firefox then Converts it to my monitor profile for a theoretical "True-Color" display.

I do not believe any other top Web browser does that (Defaults to sRGB AND Converts to Monitor RGB), but it certainly makes the best logic given the Internet is based on the sRGB color standard and probably more than 99% of the Internet does not include embedded ICC profiles.

What this means for color-critical webmasters (like me) is, I do not even have to embed profiles BECAUSE Firefox will Assign-Assume-Apply the sRGB profile correctly to my un-tagged and un-managed color by Default, and Convert it to my monitor profile.

In essence, Firefox's "Full Color Management" standard gives you a free real-world, high-performance professional color-managed viewing environment on the World Wide Web that is every bit as equal to Adobe Photoshop® monitor proofing capabilities in this example, IMHO.

This isn't hype — it's easily proven in my: BEST FIREFOX COLOR TEST PAGE TUTORIAL...

Tech note Nov. 2011: Adobe Photoshop engineer Chris Cox notes on the Adobe forums that Apple changed it 10.7 Lion to Default to sRGB (versus Monitor RGB used in all previous operating systems) — I don't have 10.7 to test this statement, but it is another giant step forward for Apple, IMO.

INDIVIDUAL COLOR SPACES (Profiles):

The initial top JPEG photos in this section are all "tagged" with embedded ICC profiles as noted.

Their lower roll-over calibration pictures show the EXACT SAME PHOTO paired without its embedded ICC profile.

These differences are noted on each individual digital image.

ADOBE RGB (1998) 2.2 gamma:

Tagged Adobe RGB (1998)
(Hold mouse over photo to rollover Untagged version.)
If the rollovers look exactly the same your Web browser is not color managed.

The COLOR-MANAGED browser (or application) HONORS the embedded ICC profile and displays it correctly by Converting, correcting or mapping it to the monitor profile.

The rollover effectively untags-strips the profile from the image, and forces the color management system (CMS) or Operating System (OS) or device to Assign-Assume-Apply its wrong default profile to the untagged image, altering its True Color.

An UN-MANAGED browser (or device) doesn't read embedded profiles so the same wrong default profile (or color space) is being Assigned-Assumed-Applied to both photos — and the pair looks identical in un-managed browsers because they are identical files (except one is Tagged with an embedded ICC profile, and the unmanaged browser ignored the profile).

Unmanaged internet browsers, including unmanaged applications, devices and unmanaged printing work flows, work on the exact same principle as demonstrated in the untagged rollovers.

Blind to embedded profiles, unmanaged applications and devices will always Apply-Assign-Assume some default profile to the photo or color graphic.

The AdobeRGB rollover illustrates WHY we should NOT put Adobe RGB (1998) on the internet: BECAUSE 90% of the world's browsers are not color managed and they will desaturate and washout Adobe RGB color as seen in the above rollover.

Moreover, AdobeRGB aRGB and ProPhotoRGB are two of the worst color spaces to use on the Internet or outside of color-managed applications like Adobe Photoshop...never set your monitor profile to Adobe RGB (1998)...and never set your Photoshop WorkingRGB to MonitorRGB.

A sure sign of an AdobeRGB color profile mismatch is the reds desaturate or get sucked out of the skin tones as in the above rollover example.

DO NOT SEE A BIG SHIFT in the Adobe RGB rollover (and/or the AdobeRGB aRGB set looks the best)?

If the Adobe RGB rollover has the least amount of color shift, you probably have one of the newer wide-gamut LCD flat screens, the so-called Adobe RGB monitors (which is okay in Photoshop, but terrible for color on the Web because the Internet is based on untagged sRGB).

###

KODAK PROPHOTO RGB 1.8 gamma:

Tagged ProPhoto RGB
(Hold mouse over photo to rollover Untagged version.)
If the rollovers look exactly the same your Web browser is not color managed.

ProPhoto RGB is an extreme wide-gamut professional colorspace used by imaging professionals (like me) — regardless of what kind of monitor you use, you should see a noticeable difference in Tagged and Untagged rollovers above.

If both ProPhotoRGB rollovers look exactly the same (very unsaturated color) you are using a noncolor-managed Web browser.

If you are using a colormanaged Web browser, the color difference will be extreme.

###

APPLE RGB 1.8 gamma:

Tagged Apple RGB
(Hold mouse over photo to rollover Untagged version.)
The rollover is stripping the embedded profile and Assigning the monitor profile.

If your OS X monitor is profiled to 1.8 'Mac' gamma, there should be minimum shift in the Untagged Apple RGB rollover.

If you are on a Mac, I highly recommend you re-calibrate your monitor to 2.2 monitor gamma, D65 6500.
SEE apple.com article: "Color and gamma settings for print and web."

Here is my HELP CALIBRATING MAC MONITORS.

###

sRGB / Standard RGB 2.2 gamma
The Web's default color space:

Tagged sRGB IEC61966-2.1
(Hold mouse over photo to rollover Untagged version.)
Again, the rollover is effectively removing the ICC profile .icc .icm.
The two photos are identical except one is tagged with an embedded profile.

If your monitor is profiled to 2.2 gamma and D65 / 6500 kelvin, there should be minimum change in the Un-tagged sRGB rollover.

On Mac OSX color-managed browser like Safari — any JPEG color shift you see on screen with the sRGB rollovers is the difference between your monitor default profile and the sRGB IEC61966-2.1 color space.

Tech note Nov. 2011: Adobe Photoshop engineer Chris Cox noted on the Adobe forums that Apple changed its 10.7 Lion to Default to sRGB (versus Monitor RGB used in all previous operating systems) — if this is true the sRGB rollovers should "match" in Safari.

On Windows Vista, for example — using a color-managed or non-color-managed browser — the sRGB rollovers should match exactly.

IF EITHER sRGB ROLLOVER IS EXTREME OVER SATURATED RED, see my WIDE GAMUT note (about fifteen paragraphs below).

On a Mac using Safari, the color changes between the Tagged sRGB color and the Un-tagged sRGB color represent the tangible difference between your Monitor RGB (default monitor profile, monitor color space) and the sRGB color space (sRGB profile).

My "standard-gamut" LCD monitors show a slight saturation boost in the un-tagged sRGB rollover which I actually prefer over the tagged sRGB versions for web surfing on Mac OSX.

If your internet browser Defaults Applies Assumes or Assigns sRGB — like Windows Vista web browsers — you will see zero change in the sRGB roll over. If you do see even the slightest color shift here, then your browser is not defaulting to sRGB.

The sRGB rollover illustrates WHY we should publish sRGB color on the internet: BECAUSE over 95% of web monitors are based on 2.2 gamma (and will display the least amount of shift in the sRGB color rollover).

Further, sRGB workflow is the SAFEST COLOR SPACE to work in — camera-and-scanner CAPTURE to monitor-and-printer PROOFING — because sRGB most closely resembles our monitor color space profile and Window's default profile.

This means if our embedded sRGB profile is stripped or ignored, the dumb application (or dumb user) applies its default monitor profile (Mac) or sRGB profile (PC) to the file and proofs it the best because the two spaces are similar.

This is exactly what is happening in the above sRGB photos and it is how sRGB has been designed to work on the Internet and in digital imaging.

###

IN THE REAL WORLD

Obviously there is nothing we can do about all the computers in the real world that use bad monitor profiles on uncalibrated systems, but good 2.2 gamma, 6500/D65 monitors will display sRGB with the most faithful appearance with the best color, truest color possible.

These calibration and color theories perform the same on most of today's computers and displays, including Apple Macintosh Mac Pro, G4, G5 PowerPC, iMac, Mac Mini, iBook, Powerbook, MacBook Pro, including Intel Windows computers like Sony VAIO, Dell, EIZO, HP Compaq.

Plus the fact that modern LCD screens and video cards are a big improvement over older CRT and computer technology. The top best monitor manufacturers for color critical work are Sony, Apple, NEC, EIZO, Dell, HP Hewlett Packard, ViewSonic, LaCie, Samsung, Mitsubishi, Acer and Eizo flat screen wide gamut computer monitors.

Less experienced users simply load the OEM default monitor profile or download the monitor's generic profile by its model number, but this will not provide optimum color on screen because monitor hardware electronics are not that stable or consistent — monitors need to be calibrated-profiled monthly to display accurate true color.

To get real professional color on our displays, we need proper calibration, hardware profiling solution, with custom monitor profiles to display real color properly.

Still, many of the newer LCD monitors look okay out of the box using its factory monitor profile, so consumers can simply plug and play a pretty picture without learning how to calibrate their monitor.

WIDE GAMUT LCD MONITORS ON MAC:

If you have one of the so-called "Adobe RGB" high-gamut wide-gamut LCD panels, the above sRGB untagged rollover will probably have a big (cartoonish) intense color saturation shift on Mac browsers especially in the reds. I have completed (March 2008) troubleshooting my own wide-gamut EIZO ColorEdge NEC MultiSync Dell Ultrasharp monitors for the intense saturation problems on the internet.

###

TROUBLESHOOT
washed out, desaturated lighter darker pictures:

If reading up or trouble shooting WHY color shifts de saturates washes out on the internet, in Photoshop Save for Web or ImageReady — here is the answer — also please read:
sRGB is the Correct Color Space for the Internet White Paper

The problem is an easy test in Adobe Photoshop SoftProof.
In Photoshop, after Converting to sRGB, go to:

Photoshop> View> Proof Setup> Monitor RGB
Photoshop> View> Proof Setup> Windows RGB
(There should be very little difference here
between Monitor RGB and Windows RGB.)

Any color differences between MonitorRGB and WindowsRGB in this Photoshop Soft Proofing is the difference between the monitor color space, Monitor RGB, and the sRGB colorspace — exactly as shown above in the tagged-untagged sRGB photos paired above.

If this Soft-Proofing technique confirms where the wrong color or density shift occurs, the solution to fix and solve the color issues is to recalibrate and reprofile display monitor to 2.2 gamma, D65 6500 degrees kelvin.

If there is still a blue shift, a bluish tint blueish tone to the photos, the actual monitor hardware is likely set to 9200 9300 Kelvin. Likewise, a yellow cast would indicate the monitor itself is set to 5500 5000 Kelvin. If the monitor has buttons, enter its menu and set its color temperature to 6500 to match its ICC profile to minimize any unwanted warm or cool tones.

If untagged AppleRGB and untagged sRGB both display incorrect color in Safari or Firefox, I would say you have a bad monitor profile or bad operating system, software bug or odd approach to monitor profiling.

If the Tagged color is bad in these examples (untagged sRGB looks good) — you may be using a defective monitor profile (how to troubleshoot and fix a bad monitor profile).

###

EMBEDDING ICC PROFILES
in internet photos and graphics:

While Safari for Windows-based computers makes color-managed web browsers more common, this professional webmaster will continue to strip ICC profiles from 99 percent of the digital photos he publishes, mostly because adding color profiles increases file sizes, about 4K per photo.

Multiply that by the number of slices contained in the picture or how many web graphics are in a web page and the download size and time to load the page greatly increases.

I believe the future of embedding ICC profiles on the internet is more in line with Windows Vista because it already treats untagged color as sRGB and thereby doesn't need color tags to display web color properly.

I base my professional internet publishing workflows on facts 1) sRGB srgb.icc is arguably the default color space of the internet, and 2) sRGB (standard red green blue) is the target color space of the world wide web intranet.

Bugs with version 4 v4 ICC profiles are also a factor that can affect proper viewing in color-managed systems — check if your apps are version 4 and version 2 ICC compliant at www.color.org.

###

ANOTHER PROBLEM
with Embedding ICC Profiles:

A real problem for web designers and color-managed Mac browsers is mixing tagged and untagged color where the graphic background needs to match or disappear into a filled box or page background color.

The above table is filled with AF641E color.
The logo backgrounds are filled with the exact same AF641E.
The tagged and untagged pixel-based graphics are identical except one has an embedded profile.

The problem here is no web browser reads ICC profiles embedded in web page code so all page color is unmanaged.

Software developers are working on bleeding-edge CSS coding to enter color values based on profiles, but CSS color compliant browsers probably should not be relied on yet as the standards are still being worked out.

Apple's ColorSync® approach means 1) ColorSync Defaults-Assigns-Applies-Assumes the monitor profile to the untagged page-box background fill color, 2) ColorSync reads the logo's embedded sRGB profile and then CONVERTS it to the monitor profile.

This means — on Mac OS-X Safari, for example — the Tagged JPEG file mismatches the Untagged page-box color surrounding it.

Compound this mismatching problem with the fact Apple defaults monitor profiles to 1.8 gamma, and web designers are faced with goofy complicated color theory and impossible target to hit.

However, notice the UnTagged logo blends properly under Mac Safari.

This is because both page color and logo graphic are untagged and having the same (wrong) profile applied: Monitor RGB.

Yes, the color matches in this untagged scenario, but the color is displaying wrong because ColorSync color management system CMS is applying its default monitor profile to the untagged sRGB color.

In fact, the Mac displays all untagged web color inaccurately because of Apple's inept approach to color on the internet...why the Apple geniuses choose to assume a unique custom monitor profile on the internet is beyond anything I can understand.

On the other side, Windows Vista operating system has a logical approach that treats untagged color as sRGB so the logo graphic blends and displays both tagged and untagged colors faithfully and as desired — a simple theory to understand and easy to target.

THE BOTTOM LINE ON EMBEDDING ICC PROFILES:

As seen in the above logo rollover, COLOR CONSISTENCY (not embedding profiles) can be much more important to some designers than COLOR ACCURACY (embedding profiles and using color-managed web browsers with hardware-calibrated monitors).

Still, Windows Vista users must wonder what all this ranting is about because Vista already matches untagged sRGB and tagged sRGB regardless of browser.

Here is a more in-depth look into using profiles on web images. with instructions how to use Adobe Save For Web for publishing on the world wide web.

###

WHY IS COLOR MANAGEMENT IMPORTANT?

This simple tutorial perfectly illustrates the problems the "geniuses," printers, dumb applications and devices have because, when they open our file and ignore its embedded profile, the Color Management System CMS CMM is forced to make an ASSUMPTION about the Source File — and a Default profile (color space) will always be applied.

If that Assumption is wrong, the Operating System, Printer, Device and/or Application shifts the color -- hosing all Conversions -- exactly in the same manner as seen here (if the profile is ignored-stripped and it does not match the workflow's default or target color space).

WHACKED RGB 2.2 gamma:

Whacked RGB is a very strange Color Space deliberately "whacked out" to help viewers instantly see what happens when ICC Profiles are ignored and/or the wrong default profile is assigned/assumed/applied.

This is the most dramatic example of color management in action, and clearly shows what happens to color outside of color-managed workflows when ICC profiles are ignored and the wrong default profile is applied:

Tagged WhackedRGB.icc
(Hold mouse over photo to rollover Untagged version.)
If the rollovers look exactly the same (blue) your Web browser is not color managed.

Both Tagged and Untagged files are identical except the top Tagged image has an embedded ICC profile, and its Untagged rollover mate has had its profile stripped for this tutorial.

Test image courtesy of CARL J. STAWICKI.

IMPORTANT POINT: It is the embedded ICC PROFILE that tells a Color Management System (CMS) how to display the file properly.

CLASSIC REAL WORLD EXAMPLE in the Real World:

The classic example of the problem in the real world is the old-school print shop's clueless "color expert" who ignores our embedded profile, because he says, he has "turned color management off" and "doesn't use profiles."

He tells us our file is bad because his print is bad, and he will try to correct our bad color and print another round of proofs.

Does this sound familiar?

What the cave man actually did was strip our embedded file of its profile, and/or he Applied-Assumed-Assigned his own working space to our file — then he takes a sledgehammer and beats our color up into his closed workflow (and he is probably working on an uncalibrated monitor and unprofiled printer to boot).

THE SIMPLE TRUTH BEHIND BASIC COLOR MANAGEMENT THEORY:

If our monitor is profiled correctly, and our RGB .tif .jpg is tagged with an embedded profile, color-managed programs like Safari, iPhoto, Preview and Photoshop will display it correctly, and it will print correctly as long as the printer Honors the source embedded profile and Converts it to a good target printer profile.

Everything else the "color expert" blames on our "bad file" is nonsense (except if the file has over-saturated, out-of-gamut colors or tones that the printer inks technology can't reproduce on the chosen paper).

If the monitor is displaying or the printer is printing a known good file (like the Photodisc PDI file used in this tutorial) bad — in an ICC-aware workflow — then the monitor profile or printer profile is bad (or your color management settings are mixed up).

Don't be fooled into concluding that the PDI color (or your color) is bad just because it displays or prints badly — this PDI reference file contains true and correct color on a professional level, you may trust it, and you should never alter it to cheat a bad work flow.

Get your profiles and settings in order on a color-managed application like Safari and Photoshop, and digital color will be proofed faithfully on the monitor and on the print.

###

CORRECT CALIBRATED MONITOR COLOR:

If your monitor is properly calibrated and profiled (how to), Safari should display tagged files with natural and healthy looking skin tones on the young girl and baby faces, and distinct neutral stepped gray bars wedges.

Here is another monitor test page to further evaluate monitor quality and neutrality, including monitor density, black & white points.

Monitor Proofing Tips:

Try dragging your .tif .jpg .gif .png file icon directly into an open Safari window. Safari should open the file and display its color correctly either by automatically Honoring the embedded profile, or by automatically Assuming-Applying-Assigning Monitor RGB to the untagged file.

Here is a SHORT ANSWER for troubleshooting bad color from inside Photoshop.

There are some known color issues with transparent .png color gamma shifting bugs, including placing .png files in web authoring programs like GoLive, Dreamweaver, Flash, Fireworks, iLife, iWeb, and movie slideshow multimedia apps like DVD Studio Pro, Final Cut Pro, Final Cut Studio, iMovie HD, iDVD, Premier, After Effects, Lightroom, Aperture. Do Google searches for most current information....

### ### ###

Other free G. BALLARD articles
on Photoshop Color Management:

BASIC CORE THEORY on Photoshop® COLOR MANAGEMENT

WHAT IS ColorSync?
A Simple Explanation — The Short Answer
info about how Apple's ColorSync CMM works

HONOR-ASSIGN-ASSUME-CONVERT PROFILE Photoshop color tutorial
Learn HOW Photoshop actually handles color profiles, color spaces

COLOR SHIFTS ON WEB (How to Fix it)

16-BIT COLOR WORKFLOW Adobe® Photoshop®
CAPTURE as much info as possible & PRESERVE that info throughout the editing process by using Photoshop ADJUSTMENT LAYERS

TURN COLOR MANAGEMENT ON &
Honor My Embedded Profile, Please
YOU CANNOT TURN PHOTOSHOP COLOR MANAGEMENT OFF!

How to Make Monitor Match Print Printing Tutorial
Photoshop professional NO COLOR ADJUSTMENT printing workflow
for Epson ink-jet printers, but will port over to other top printer utilities like
HP, Lexmark, Canon inkjet printers, including CMYK.

### ### ###

DOWNLOAD PDI high-resolution reference images — now with ProPhoto RGB targets! The low-resolution calibration pictures used in this tutorial, plus high resolution images files for gballard calibrated printing tutorials, sRGB, AdobeRGB, AppleRGB, ProPhotoRGB.

Monitor Calibration Photos © Photodisc/GettyImages
Pretty young girls photo cute baby pictures baby faces PDI target
reference images were altered by G. BALLARD for this tutorial.

Safari® ColorSync® are registered trademarks of Apple Computers, Inc.

Photoshop® is a registered trademark of Adobe Systems, Inc.

www.gballard.net
Writing and web page by GARY G. BALLARD
Please read the www.gballard.net site USER AGREEMENT and
DISCLAIMER for legal issues regarding your use of
the www.gballard.net website.

### ### ###
### ### ###
### ### ###

I wanted to setup test pages to see if embedding ICC Profiles in web page source code worked -- it didn't -- but this Embedded Page Profile series got very confusing to write my points.

These other four test pages contain Untagged JPEG files
and a profile embedded in their PAGES source code, as noted:
NO Profile | sRGB Profile | AdobeRGB Profile | AppleRGB Profile

I wrote them for professional use, for what it may be worth to you when embedding ICC profiles in web pages becomes usable.