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.

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.
The rollover is effectively "stripping" 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 6500, most standard-gamut monitors will show the least change in the Untagged sRGB rollover — this is what you want to happen (the smallest change between tagged and untagged sRGB).

In a color-managed Web browser, any color shift you do see on your monitor is the difference between your monitor profile and the sRGB IEC61966-2.1 color space. One exclusion to this is Firefox using Full Color Management Value 1 — the sRGB tagged and untagged photos should be a dead-on match (click on the link for more information about Firefox).

If you are using 1.8 monitor gamma, untagged sRGB will display lighter and washed out. If you are on a Mac and this is happening, I highly recommend reviewing apple.com article: "Color and gamma settings for print and web" and then switching to 2.2 monitor calibration — Snow Leopard 10.6 switched to 2.2 gamma, and Lion 10.7 defaults to 2.2 gamma, too.

The sRGB rollover illustrates WHY we should only publish sRGB on the internet:

BECAUSE the majority of Web monitors are based on 2.2 gamma and do not use color-managed web browsers (sRGB will display the least amount of shift in the sRGB rollover for most users).

Even with a high-quality monitor profiled to 2.2 gamma and Safari — it is normal for the above rollover to show a slight saturation boost in the un-tagged sRGB rollover using a color-managed browser (the difference between sRGB and your monitor profile).

If by chance your monitor shows an intense red saturation shift in the above sRGB example, you are probably using a WIDE GAMUT MONITOR and the below rollovers should look more natural because Adobe RGB 1998 is much closer to the wide-gamut device standard.

Adobe RGB Vs. sRGB

Tagged Adobe RGB (1998)
(Hold mouse over photo to rollover Untagged version.)

The above Adobe RGB (1998) rollover illustrates WHY we should not put Adobe RGB on the internet: BECAUSE the majority of the world's browsers are not color managed and they will desaturate and washout Adobe RGB as seen in the above rollover on the more common sRGB-compliant monitors.

WIDE GAMUT MONITOR SPACE

If by chance your color-managed Web browser shows the least change in this example, you are probably using a so-called WIDE GAMUT MONITOR. The Adobe RGB (aRGB) rollovers look best because aRGB is much closer to the wide-gamut device standard.

1.8 "Mac" Legacy Gamma

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

If your monitor is profiled to the legacy 1.8 'Mac' gamma default standard, there will be minimum shift in the Untagged Apple RGB rollover.

If you are using 2.2 monitor gamma (as recommended), untagged Apple RGB will display darker.

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."

Need HELP CALIBRATING MAC MONITORS?

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.

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, MacBook Air, Powerbook, MacBook Pro, including Intel Windows computers like Sony VAIO, Dell, EIZO, HP Compaq.

Plus the fact that modern LCD, TFT screens and video cards are a big improvement over older CRT and 20th century 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.

CUSTOM 'CALIBRATED' MONITOR PROFILES

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.

COLOR CONSISTENCY or COLOR ACCURACY

If you are not crystal clear on how your apps or devices Assign/Assume/Apply or Pass Through RGB color spaces (the point I am exhausting here), I will recommend figuring it out now BEFORE trying to go any further with the theory because it lays another cornerstone to conceptualizing basic color management theory — and you will be lost without a 100-percent grasp of this Default and Pass-Through concept.

My observations (late 2012) concluded that Windows only does "half" or limited color management — meaning color managed Web browsers on Windows only Convert tagged elements to sRGB.

Firefox with Value 1 is an exception: Firefox Assigns sRGB to all untagged elements, honors embedded profiles in tagged elements, and Converts them to the default monitor profile the same as Photoshop.

My tests included "color-managed" Windows versions of Chrome, Internet Explorer IE, and Safari.

If you want to test this claim, just open one of the Tagged PDI reference images in Photoshop (Use the Embedded Profile), drag its .jpg file icon into your color-managed Windows Web browser's opened window (not Firefox) to display it in the browser — and compare the Photoshop and browser windows side by side (inspect closely zoomed in at Actual Pixels, 100%).

If you are using a custom monitor profile, Photoshop (Source> Monitor) will most likely look at least slightly different than the Windows Web browser (Source> sRGB) — the difference between the two windows will be the difference between sRGB and your monitor profile.

A good place to look for differences (if your monitor is close to sRGB) is the two darkest boxes in the lower left corner of the image (the 10-10-10 box will darken up a bit compared to the black 0-0-0 box). If you are on a wide gamut display, you will see an obvious oversaturation in the reds.

My Whacked RGB tutorial below perfectly illustrates the problems monitors have when they "proof" our document without using its embedded profile. The Color Management System CMS CMM is forced to make an ASSUMPTION about the Source Profile — and a default profile (color space) will always be applied, and/or passed through to the monitor unchanged.

If that Assumption is wrong, the operating system, printer, device and/or application shifts the color — ruining all Conversions — exactly in the same manner as seen below.

WHACKED RGB 2.2 gamma:

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

Whacked RGB is an especially useful tool to troubleshoot work flow problems because it most clearly points to color-management problems.

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 default profile — 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 uses the 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).

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.

List of Color-Managed Web Browsers:

DISCLAIMER: These browsers may now support or not support true color management so test your browsers on my rollovers to see if your browser is color managed, and look for any hidden settings to enable how they react to embedded profiles.

Apple's SAFARI for Mac
Apple's SAFARI for Windows XP Windows VISTA
Safari 5 official information and free DOWNLOAD (Apple may have pulled their Windows Safari support in 2012)

OmniWeb 5.1.3 (Mac)
(ColorSync® must be checked in OmniWeb> Preferences> Appearance> Use ColorSync)

Firefox 11-3x (Mac, Windows, GNU/Linux free download)
Note: Current versions of Firefox have color management enabled by default so be sure to check if FF is working on your machine. BEST FIREFOX TEST PAGE for confirming "Full Color Management" standard.

iCAB-Taxi 4.9 and later (Mac)
iCab is an alternative web browser for the Apple Macintosh with numerous useful features not found in other browsers...iCab is shareware and costs $20, but it can be also used for free with a small limitation.

CAMINO (Mac)
Universal Application, runs natively on both PowerPC and Intel-based Macs

OPERA (Mac OSX, Windows, Solaris, O/S2, Linux, FreeBSD i386, BeOS) — user emailed me that version 12.5 and later supports color management.

Microsoft Explorer IE 10 IE9 (Windows 8 7 Vista))
See Microsoft.com website for more info...
Note: IE may or may not Convert to the Monitor profile, but some Windows users have stated IE only Converts tagged images to sRGB...

Microsoft EXPLORER (Mac)
(ColorSync® must be checked in Explorer> Preferences> Web Content: Use ColorSync)
Note: Microsoft Internet Explorer for the Mac was discontinued in 2003 and hasn't been supported since 2005.

List of Un-Managed Web Browsers:

I can't keep up with this, be sure to test your browsers on my rollovers to see if your browser is color managed, and look for any hidden settings to enable how they may or may not react to embedded profiles.

GOOGLE CHROME PC Windows and Mac OSX browser.
Google may or may not be color aware, but do check out this blog for step-by-step instructions how turn on color management in Chrome — Sept 2012, people are emailing me that beta Chrome supports color management.

Mozilla FIREFOX (Mac, Windows, GNU/Linux)
Note: Mozilla-Firefox has gfx.color_management options that allow users to make Firefox operate like an un-managed browser.

OmniWeb 5.1.3 (Mac)
(using default preferences)

Microsoft Internet Explorer (Mac & Windows)
(using default preferences)

OPERA (Mac OSX, Windows, Solaris, O/S2, Linux, FreeBSD i386, BeOS) — user emailed me that version 12.5 and later supports color management.

BROWSER NOTES:

The what is the best web browser question inevitability boils down to speed, what is the fastest browser; user interface UI GUI, what is the easiest most intuitive web browser to use; what is the most secure web browser, security is always important; and compatibility, does it display the page and function properly?

My favorite browser is Safari because it is color managed, Safari is one of the fastest browsers available, and it has a commonsense, intuitive interface and clean simple visual style that appeals to me — yet I also really like Firefox with its Full Color Management enabled.

In any case, most internet web browsers can be downloaded for free and tested, and the top web browsers for Windows XP Vista professional and Mac OS X are linked above for convenience.

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....

MONITOR CHECKING:

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.

HELP CALIBRATING MAC MONITORS

TROUBLESHOOTING BAD MONITOR PROFILES

PHOTOSHOP CS5: HOW TO MAKE PRINT MATCH MONITOR WORK FLOW (workflow & troubleshooting)

COLOR MANAGEMENT THEORY (& terminology)

ASSIGN Versus CONVERT to Profile Tutorial

OSX TROUBLESHOOTING & MAINTENANCE GUIDE

PROFESSIONAL PHOTOGRAPHY PORTFOLIO

PHOTOSHOP SAVE FOR WEB & DEVICES (stripping and embedding ICC profiles)

WHAT IS ColorSync?

TURN COLOR MANAGEMENT ON & Honor My Embedded Profile, Please!

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