ICC color correction in Firefox

  • Revision slug: ICC_color_correction_in_Firefox
  • Revision title: ICC color correction in Firefox
  • Revision id: 133012
  • Created:
  • Creator: Rafe
  • Is current revision? No
  • Comment 42 words added

Revision Content

{{ fx_minversion_header("3") }}

Although support for color correction was introduced in Firefox 3, it was disabled by default, requiring some tinkering about in the about:config window to enable it.  Firefox 3.5 addresses the issues that caused it be disabled by default in the previous version, and now images with International Color Consortium (ICC) tagging are, by default, color corrected.

The image below is split into three sections.  The top left corner shows the image as rendered by Firefox 2.  The top right corner shows how the image renders in Firefox 3.  The bottom shows the image rendered in Photoshop.

iccsample.jpg

As you can see, Firefox 3 and Photoshop render the image identically, because both support the embedded color correction profile.  Firefox 2 ignores the profile, resulting in mismatched color.

Configuring color correction

Color correction can be controlled by setting the value of the gfx.color_management.mode preference, as follows:

Value Description
0 Color management disabled. (Default in Firefox 3.)
1 Full color management.
2 Color management applied only to tagged images.  (Default in Firefox 3.5.)

Full color management means that everything rendered by Firefox, with the exception of plugins, has its colors corrected.

Specifying a color profile

You can also specify a specific color profile to use for your hardware by setting the value of the gfx.color_management.display_profile preference to be the path to a color profile to use.

If no path is specified for the color profile, Firefox queries the operating system and uses its configured color profile.

Specifying a default rendering intent

In addition, you can choose to set the value of the gfx.color_management.rendering_intent preference to specify a default rendering intent.  By default, the intent specified by images is ignored, unless you specify -1 for this value.

The following table lists the possible values.

Value Description
-1 Use embedded intent.  By default, the embedded intent on images is ignored.
0 Perceptual.  Directs Firefox to render the image to preserve detail throughout the tonal range of the image.  Useful for general purpose display of images in typical cases, especially for photographs and other pictures.
1 Media-relative colorimetric. This rescales the color spectrum so that the white point of the rendering medium (such as the display screen) is mapped to the white point of the reference medium.  This is most useful for colors that have been mapped to a medium with a smaller gamut than the reference medium.
2 Saturation. This preserves vividness of color at the expense of preservation of precision of hue.  This is particularly useful for charts and diagrams, and other media whose colors should "pop" while precise duplication of hue is less important.
3 ICC-Absolute colorimetric. This is most useful for spot color and when simulating one medium on another, as it doesn't alter in-gamut colors.
Note: In Firefox 3.5, perceptual, media-relative, and saturation intents all render the same way.

Caveats

The new QCMS color management system introduced in Firefox 3.5 currently only supports ICC version 2 color profiles, not version 4. This may result in too dark images. See bug 488800 and the ICC version 4 profile test.

See also

 

Revision Source

<p>{{ fx_minversion_header("3") }}</p>
<p>Although support for color correction was introduced in Firefox 3, it was disabled by default, requiring some tinkering about in the about:config window to enable it.  Firefox 3.5 addresses the issues that caused it be disabled by default in the previous version, and now images with <a class="external" href="http://www.color.org/" title="http://www.color.org/">International Color Consortium</a> (ICC) tagging are, by default, color corrected.</p>
<p>The image below is split into three sections.  The top left corner shows the image as rendered by Firefox 2.  The top right corner shows how the image renders in Firefox 3.  The bottom shows the image rendered in Photoshop.</p>
<p><img alt="iccsample.jpg" class="internal default" src="/@api/deki/files/3218/=iccsample.jpg" style="width: 500px; height: 334px;"></p>
<p>As you can see, Firefox 3 and Photoshop render the image identically, because both support the embedded color correction profile.  Firefox 2 ignores the profile, resulting in mismatched color.</p>
<h2>Configuring color correction</h2>
<p>Color correction can be controlled by setting the value of the <code>gfx.color_management.mode</code> preference, as follows:</p>
<table class="standard-table"> <tbody> <tr> <td class="header">Value</td> <td class="header">Description</td> </tr> <tr> <td>0</td> <td>Color management disabled. <strong>(Default in Firefox 3.)</strong></td> </tr> <tr> <td>1</td> <td>Full color management.</td> </tr> <tr> <td>2</td> <td>Color management applied only to tagged images.  <strong>(Default in Firefox 3.5.)</strong></td> </tr> </tbody>
</table>
<p>Full color management means that everything rendered by Firefox, with the exception of plugins, has its colors corrected.</p>
<h3>Specifying a color profile</h3>
<p>You can also specify a specific color profile to use for your hardware by setting the value of the <code>gfx.color_management.display_profile</code> preference to be the path to a color profile to use.</p>
<p>If no path is specified for the color profile, Firefox queries the operating system and uses its configured color profile.</p>
<h3>Specifying a default rendering intent</h3>
<p>In addition, you can choose to set the value of the <code>gfx.color_management.rendering_intent</code> preference to specify a default rendering intent.  By default, the intent specified by images is ignored, unless you specify -1 for this value.</p>
<p>The following table lists the possible values.</p>
<table class="standard-table"> <tbody> <tr> <td class="header">Value</td> <td class="header">Description</td> </tr> <tr> <td>-1</td> <td>Use embedded intent.  By default, the embedded intent on images is ignored.</td> </tr> <tr> <td>0</td> <td>Perceptual.  Directs Firefox to render the image to preserve detail throughout the tonal range of the image.  Useful for general purpose display of images in typical cases, especially for photographs and other pictures.</td> </tr> <tr> <td>1</td> <td>Media-relative colorimetric. This rescales the color spectrum so that the white point of the rendering medium (such as the display screen) is mapped to the white point of the reference medium.  This is most useful for colors that have been mapped to a medium with a smaller gamut than the reference medium.</td> </tr> <tr> <td>2</td> <td>Saturation. This preserves vividness of color at the expense of preservation of precision of hue.  This is particularly useful for charts and diagrams, and other media whose colors should "pop" while precise duplication of hue is less important.</td> </tr> <tr> <td>3</td> <td>ICC-Absolute colorimetric. This is most useful for spot color and when simulating one medium on another, as it doesn't alter in-gamut colors.</td> </tr> </tbody>
</table>
<div class="note"><strong>Note:</strong> In Firefox 3.5, perceptual, media-relative, and saturation intents all render the same way.</div>
<h3>Caveats</h3>
<p>The new QCMS color management system introduced in Firefox 3.5 currently only supports ICC version 2 color profiles, not version 4. This may result in too dark images. See <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488800" title="https://bugzilla.mozilla.org/show_bug.cgi?id=488800">bug 488800</a> and the <a class="external" href="http://www.color.org/version4html.xalter" title="http://www.color.org/version4html.xalter">ICC version 4 profile test</a>.</p>
<h2>See also</h2>
<ul> <li><a class="external" href="http://bholley.wordpress.com/2008/09/12/so-many-colors/" title="http://bholley.wordpress.com/2008/09/12/so-many-colors/">So Many Colors</a> (blog post)</li> <li><a class="external" href="http://www.dria.org/wordpress/archives/2008/04/29/633/" title="http://www.dria.org/wordpress/archives/2008/04/29/633/">Firefox 3: Color profile support</a> (blog post)</li> <li><a class="external" href="http://ejohn.org/blog/color-profiles/" title="http://ejohn.org/blog/color-profiles/">Color Profiles in Firefox 3</a> (blog post)</li> <li><a class="external" href="http://www.color.org/" title="http://www.color.org/">International Color Consortium</a></li>
</ul>
<p> </p>
Revert to this revision