<h1>Additions to CSS Color 4</h1>
<pre class='metadata'>
Level: 1
Status: ED
ED: none
Shortname: svg-color
Group: svg
Editor: Chris Lilley, W3C, chris@w3.org
Warning: "Not Ready"
Abstract: This is a temporary place for additions to CSS Colors 4 and moved from SVG2.
</pre>


<div class="annotation svg2-requirement">
  <table>
    <tr>
      <th>SVG 2 Requirement:</th>
      <td>Support color management.</td>
    </tr>
    <tr>
      <th>Resolution:</th>
      <td><a href="http://www.w3.org/2011/10/28-svg-irc#T16-52-12">SVG 2 will depend on SVG color management subject to deciding the exact conformance classes required.</a></td>
    </tr>
    <tr>
      <th>Purpose:</th>
      <td>To align with mainstream graphcs use, allow fluorescent colors, more than 8 bit color, etc.</td>
    </tr>
    <tr>
      <th>Owner:</th>
      <td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3160">ACTION-3160</a>)</td>
    </tr>
    <tr>
      <th>Note:</th>
      <td>SVG color management will become a chapter in SVG 2, no longer an independent module.</td>
    </tr>
  </table>
</div>

<div class="annotation svg2-requirement">
  <table>
    <tr>
      <th>SVG 2 Requirement:</th>
      <td>Support CSS3 Color syntax.</td>
    </tr>
    <tr>
      <th>Resolution:</th>
      <td><a href="http://www.w3.org/2011/07/29-svg-minutes.html#item08">SVG 2 will depend on CSS3 Color.</a></td>
    </tr>
    <tr>
      <th>Purpose:</th>
      <td>To align with CSS, given CSS3 Color is widely implemented.</td>
    </tr>
    <tr>
      <th>Owner:</th>
      <td>Chris (no action)</td>
    </tr>
  </table>
</div>


<h2 id="ColorIntroduction">Introduction</h2>
  
<p class="normativity"><em>This introduction is informative, not normative.</em></p>
  
  <p>Several properties used in SVG take a color specification. Also, external media such as images or video
  contain colors.</p>

<p>All SVG colors used as property values include a fallback specified in the sRGB color space
[<a href="refs.html#ref-SRGB">SRGB</a>]. </p>

<p>Additionally, SVG content can specify an alternate color specification
using an ICC profile [<a href="refs.html#ref-ICC42">ICC42</a>].
<!-- check paint chapter for content that should be here, and move it -->
If ICC-based colors are provided,
then the ICC-based color takes precedence over the sRGB color specification;
otherwise, the sRGB fallback colors will be used.
Note that, in this specification, by default color interpolation occurs in sRGB color space even if an
ICC-based color specification is provided, but this can be changed (see <a>'color-interpolation'</a>).</p>
  
  <div class="ready-for-wider-review">
    <h2 id="color-managed-images">Color-managed images</h2>
    
    <p class="note">
      New in SVG 2.</p>
    
    <p>Implementations of SVG 2 are required to color-manage all images. The embedded profile is used. If there is no embedded profile, sRGB is assumed, for RGB images.</p>
      
    <p class="issue">Define processing for untagged greyscale and CMYK images. Could be a default profile, or an 'explicitly undefined' with a warning to avoid untagged non-RGB images when authoring.</p>

    <p class="issue">References to "SVG 2 User Agent" might need to be replaced
    with one of the conformance classes listed in the <a href="conform.html">Conformance</a>
    appendix.</p>
    
    <p><span class="requirement" id="assert_taggedImages">If a referenced image
    contains color profile information, a SVG 2 User Agent MUST use that profile
    to render the image.</span>
    <span class="requirement" id="assert_untaggedImages">Otherwise,
    if a referenced image contains no color profile information, a
    SVG 2 User Agent MUST use the sRGB profile to render the image.</span></p>
    

    <h2 id="Color_syntax">Color syntax</h2>
    
    
    <h3 id="sRGBcolor">
      sRGB colors</h3>
    
    <p  class="prop-value"><a href="#color">&lt;color&gt;</a></p>
    
    <p>Example (these all represent the same color):</p>
    <div class="example">
      <pre>
&lt;circle fill="rgb(205,133,63)"/>
&lt;circle fill="peru"/>
&lt;circle fill="rgb(80.392%, 52.157%, 24.706%)"/>
&lt;circle fill="#CD853F"/>
&lt;circle fill="hsl(30, 59%, 53%)"/></pre>
      </div>
    
    <p class="note">
       Includes all syntactic forms supported by  SVG 1.1, adds hsl() from  [<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>].</p>
    <p class="note">See the CSS Color Module Level 3 specification for the
      definition of the color type.
      [<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>]</p>
      
      <p class="note">Must add the hsla and hsl forms.</p>
    
    <div class="requirement" id="assert_base_syntax">
      <p>All the syntactic forms for an sRGB color, including the full set of color keywords, shall be supported by an SVG 2 User Agent.</p>
    </div>
    
    <p>The rendering requirements for sRGB colors are more strict than for SVG 1.1  User Agents,
      where color management is optional.</p>
    <div class="requirement" id="assert_render_sRGB">
      <p>
        When an sRGB color is used - because it is the sole color specification, or in a
        permitted fallback situation - a conformant SVG 2 User Agent 
        shall render it in conformance with the ICC profile for sRGB, to obtain the
        desired color appearance.
      </p>
    </div>
    
    <p class="issue">
      Define 'permitted fallback situation' and link to it.
    </p>
    
    <h3 id="sRGBcoloralpha">
      sRGB colors with alpha</h3>
    
    <p  class="prop-value"><a href="#color">rgba(r, g, b, a)</a></p>
    
    <p>Example </p>
    <div class="example">
      <pre>
&lt;circle fill="rgba(205,133,63, 0.5)"/></pre>
      </div>

    
    <p class="note">
      New in SVG 2, added from  [<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>].</p>
    
    <div class="requirement" id="assert_combine-alpha">
      <p>When an sRGB color with alpha is used in a property value,  an SVG 2 User Agent shall combine the alpha value with any separately specified alpha value that applies to that property, by multiplying the alpha values together.</p>
    </div>
    
    <p>Example (these render as the same color)</p>
    <div class="example">
      <pre>
&lt;circle fill="rgba(205,133,63, 0.25)"/>
&lt;circle fill="rgba(205,133,63, 1.0)" fill-opacity="0.25"/>
&lt;circle fill="rgba(205,133,63, 0.5)" fill-opacity="0.5"/></pre>
</div>
    
   
    <div class="requirement" id="assert_render_sRGB_alpha">
      <p>
        When an sRGB color with alpha is used - because it is the sole color specification, or in a
        permitted fallback situation - a conformant SVG 2 User Agent 
        shall render it in conformance with the ICC profile for sRGB, to obtain the
        desired color appearance.
      </p>
    </div>
    
    <h3 id="icc-colors">
      ICC colors</h3>
    
    <p  class="prop-value"><a href="#fallback">&lt;fallback&gt;</a>
      <a href="#icccolor"> icc-color(&lt;name&gt; [,&lt;icccolorvalue&gt;]*)</a></p>
    
    <p class="issue">This grammar doesn't match the grammar
    <a href="#icccolor">below</a>.  Also the ones below should
    be translated from EBNF to CSS Value syntax.</p>

    <p>Example:</p>
    <div class="example">
      <pre>
&lt;style>
@color-profile {
  name: acmecmyk;
  src: url(http://printers.example.com/acmecorp/model1234);
}
&lt;/style>
&lt;circle fill="#CD853F icc-color(acmecmyk, 0.11, 0.48, 0.83, 0.00)"/></pre>
    </div>
    
    <p class="note">Same syntax as SVG 1.1, increased conformance requirement.</p>
    
    <p>SVG 2  uses the extended ICC color specification from SVG 1.1.  In SVG 1.1,  parsing the syntax was required but implementing the ICC colour itself  was optional,  as indicated by  phrases such as "If ICC-based colors are provided and the SVG user agent supports ICC color, then...". An SVG 1.1 user agent which also conforms to this specification "supports ICC color" for the purposes of conforming to SVG 1.1.</p>
    
    <p>
      As with SVG Full 1.1, SVG 2 content may specify color using an ICC profile (see
      [<a href="refs.html#ref-ICC42">ICC42</a>]); an sRGB fallback must still be provided.
    </p>
    
    <p>An SVG 2 User Agent searches the color profile description database for
      a <a href="#ColorProfileDescriptions">color profile description</a> entry whose
      name descriptor matches &lt;name&gt; and uses the last matching entry that is found;
      painting shall be done using the given ICC color, where the comma-separated list
      (with optional white space) of <strong>&lt;icccolorvalue&gt;</strong>'s is a set
      of ICC-profile-specific color values, expressed as <a>&lt;number&gt;</a>s
      (see <a href="#icc-colors">ICC colors</a>). If no match is
      found, then the fallback sRGB color is used.
    </p>
    
    <div class="requirement" id="assert_ICCColorPrecedence">
      <p>
        If ICC-based colors are provided, an SVG 2 User Agent
        MUST use the ICC-based color in preference to the sRGB fallback color,
        unless the ICC color profile cannot be used (is unavailable, malformed, or uses an unsupported profile connection
        space).</p>
    </div>
    <div class="requirement" id="assert_useICC">
      <p>When rendering, if both ICC and sRGB fallback colors are provided and the referenced ICC profile can be used, a SVG 2 User Agent MUST render using the ICC color values, using the specified ICC profile as the input profile.</p>
    </div>
    
    <h3 id="LAB">LAB color</h3>
    
    <p class="note">
      New in SVG 2.</p>
    
    <p   class="prop-value"><a href="#fallback">&lt;fallback&gt;</a> 
      <a href="#cielabcolor">cielab(&lt;Lightness&gt;, &lt;a&gt; &lt;b&gt;)</a> | <br />
      <a href="#fallback">&lt;fallback&gt;</a>
      <a href="#cielchabcolor">cielchab(&lt;Lightness&gt; &lt;Chroma&gt;, &lt;Hue&gt; )</a>
    </p>
    
<div class="example">
    <pre>
&lt;circle fill="#CD853F cielab(62.253188, 23.950124, 48.410653)"/>
&lt;circle fill="#CD853F cielch(62.253188, 54.011108, 63.677091)"/>
</pre>
    </div>
  
    
    <p>An SVG 2 User Agent directly uses the CIE LAB or CIE LCHab values, where the comma-separated list
      (with optional white space) of <strong>&lt;icccolorvalue&gt;</strong>'s is a set
      of Lightness, a and b or Lightness, Hue and Chroma values, expressed as
      <a>&lt;number&gt;</a>s. A color profile is not referenced in the SVG, although profile-based implementations may 
    choose to implement this by providing and using an LAB profile.</p>
          
          <p>The white point  is D50, which is the whitepoint defined by the CIE for CIELab profile connection space and the 
            whitepoint used for image editors that provide LAB functionality.
          LAB measurements relative to a different whitepoint should be adapted to D50 to be used in SVG 2; the linear Bradford chromatic adaptation transform [<a href="refs.html#ref-BRADFORD">BRADFORD</a>] is suggested for this.</p>
    
    <div class="requirement" id="assert_LABColorPrecedence">
      <p>
        If LAB-based colors are provided, an SVG 2 User Agent
        MUST use the LAB-based color in preference to the sRGB fallback color.</p>
    </div>
    <div class="requirement" id="assert_useLAB">
      <p>When rendering, if both LAB and sRGB fallback colors are provided, a SVG 2 User Agent MUST render using the ICC color values, using the specified ICC profile as the input profile.</p>
    </div>
          
          <p>A fallback sRGB color must still be provided, for non-color-managed user agents.</p>
    
    <h3 id="named">
    ICC named color</h3>
    
    <p class="note">
      New in SVG 2.</p>
    
    
    <p   class="prop-value"><a href="#fallback">&lt;fallback&gt;</a>
      <a href="#iccnamedcolor">icc-named-color(&lt;name&gt;, &lt;namedColor&gt;)</a></p>
    
    <p>Example:</p>
    <div class="example">
    <pre >
&lt;style>
@color-profile {
  name: FooColors;
  src: url(http://swatches.example.com/Foo);
}
&lt;/style>
&lt;circle fill="#CD853F icc-color(FooColors, Sandy23C)"/></pre>
      </div>
    
    <p>
      SVG 2 introduces the ability to specify a color using a 'Named Color Profile'.
    </p>
    <p>An SVG 2 User Agent searches the color profile description database for
      a <a href="#ColorProfileDescriptions">color profile description</a> entry whose
      name descriptor matches &lt;name&gt; and uses the last matching entry that is found;
      painting shall be done using the given ICC color, where namedColor is a
      &lt;string&gt; indicating the named color to use.</p>
    
    <p class="issue">This might need to be an &lt;ident&gt; rather than a &lt;string&gt;.</p>

    <p>ICC named color profiles provide a platform- and implementation-neutral way
    to share a swatch of colors, or to use user-created names for colors.</p>
    
    <div class="requirement" id="assert_ICCNamedColorPrecedence">
      <p>
        If ICC-based named colors are provided, a conformant SVG 2 User Agent 
        MUST use the ICC-based named color in preference to the sRGB fallback
        color, unless the ICC named color profile is unavailable, malformed, or uses a profile
        connection space other than CIE XYZ or CIE LAB.</p>
    </div>
    <div class="requirement" id="assert_useICCNamed">
      <p>
        When an ICC named color is used, a conformant SVG 2 User Agent 
        shall render it in conformance with the specified ICC profile to obtain the
        desired color appearance.</p>
    </div>
    
  </div>
  
<div class="ready-for-wider-review">
  <h2 id="Unmanaged">Unmanaged colors</h2>
  <h3 id="device">
  Uncalibrated device color</h3>
  
  <p class="note">
    New in SVG 2.</p>
  
  <p  class="prop-value"><a href="#fallback">&lt;fallback&gt;</a>
    <a href="#devicegray">device-gray(&lt;gray&gt;)</a> |  <br />
    <a href="#fallback">&lt;fallback&gt;</a>
    <a href="#devicergb">device-rgb(&lt;red&gt; &lt;green&gt; &lt;blue&gt;)</a> |  <br />
    <a href="#fallback">&lt;fallback&gt;</a>
    <a href="#devicecmyk">device-cmyk(&lt;cyan&gt; &lt;magenta&gt; &lt;yellow&gt; 
      &lt;black&gt;)</a> |  <br />
    <a href="#fallback">&lt;fallback&gt;</a>
    <a href="#devicegray">device-nchannel(&lt;number&gt;+)</a> |
  </p>
  
 
  <div class="example">
  <pre>
&lt;circle fill="#CD853F device-cmyk(0.11, 0.48, 0.83, 0.00)"/></pre>
  </div>
  
  <p>
    SVG 2  introduces a method of specifying uncalibrated device colors. This
    is sometimes useful in print workflows, for example to produce patches of known 
    ink density used for quality control purposes. </p>
  
  <p>An SVG 2 User Agent which supports the indicated class of output device
    will pass the values through without color management. If the class of output device 
    (for example, cmyk) is not supported, then the fallback
    sRGB color is used.
  </p>
  <p>
    As these are uncalibrated, any interpolation or compositing occurs using the fallback
    sRGB color value.</p>
  
</div>

<div class="ready-for-wider-review">
<h2 id="ColorProperty">The effect of the <span class="property">'color'</span> property</h2>

<p class="note">See the CSS Color Module Level 3 specification for the
definition of <a>'color'</a>.
[<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>]</p>

<p>The <a>'color'</a> property is used to provide a potential indirect value,
<span class="prop-value">currentColor</span>, for the <a>'fill'</a>,
<a>'stroke'</a>, <a>'solid-color'</a>, <a>'stop-color'</a>, <a>'flood-color'</a> and
<a>'lighting-color'</a> properties.  The property has no other effect
on SVG elements.</p>

<div class="example">
  <p>The following example shows how the inherited value of the
  <a>'color'</a> property from an HTML document can be used to
  set the color of SVG text in an inline SVG fragment.</p>

  <pre>
&lt;!DOCTYPE html>
&lt;style>
body { color: #468; font: 16px sans-serif }
svg { border: 1px solid #888; background-color: #eee }
&lt;/style>
&lt;p>Please see the diagram below:&lt;/p>
&lt;svg width="200" height="100">
  &lt;g fill="currentColor">
    &lt;text x="70" y="55" text-anchor="end">START&lt;/text>
    &lt;text x="130" y="55">STOP&lt;/text>
    &lt;path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
  &lt;/g>
&lt;/svg>
</pre>

  <div class="figure">
    <div class="bordered" style="color: #468; font: 16px sans-serif; display: inline-block; text-align: left; padding: 32px 128px 32px 32px">
      <p style="margin-top: 0; margin-bottom: 1em">Please see the diagram below:</p>
      <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" style="border: 1px solid #888; background-color: #eee">
        <g fill="currentColor">
          <text x="70" y="55" text-anchor="end">START</text>
          <text x="130" y="55">STOP</text>
          <path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
        </g>
      </svg>
    </div>
    <p class="caption">The text and arrow in the SVG fragment are filled
    with the same color as the inherited <a>'color'</a> property.</p>
  </div>
</div>
</div>

<h2 id="ColorProfileDescriptions">Color profile descriptions</h2>

  <h3 id="ColorProfileDescriptionsOverview">
    Overview of color profile descriptions</h3>
  <p>
    The <a href="http://www.color.org/">International Color Consortium</a> has established
    a standard, the ICC Profile [<a href="http://www.color.org/ICC-1A_1999-04.PDF">ICC32</a>],
    for documenting the color characteristics of input and output devices. Using these
    profiles, it is possible to build a transform and correct visual data for viewing
    on different devices.</p>
  <p>
    A <span class="SVG-Term">color profile description</span> provides the bridge between
    an ICC profile and references to that ICC profile within SVG content. The color
    profile description is added to the user agent's list of known color profiles and
    then used to select the relevant profile. The color profile description contains
    descriptors for the location of the color profile on the Web, a name to reference
    the profile and information about rendering intent.</p>

<h3 id="ColorProfileAtRule">The CSS <strong>@color-profile</strong> rule</h3>

<p>When the document is styled using CSS, the CSS
<strong>@color-profile</strong> rule can be used to specify a color
profile description. The general form is:</p>

<pre>
@color-profile { &lt;color-profile-description&gt; }
</pre>

<p>where the &lt;color-profile-description&gt; has the form:</p>

<pre>
descriptor: value;
[...]
descriptor: value;
</pre>

<p>Each @color-profile rule specifies a value for every color
profile descriptor, either implicitly or explicitly. Those not
given explicit values in the rule take the initial value listed
with each descriptor in this specification. These descriptors
apply solely within the context of the @color-profile rule in
which they are defined, and do not apply to document language
elements. Thus, there is no notion of which elements the
descriptors apply to, or whether the values are inherited by
child elements.</p>

<p>The following are the descriptors for a &lt;color-profile-description&gt;:</p>

    <div class="propdef">
      <dl>
        <dt id="ColorProfileSrcProperty"><span class="descdef-title property">'src'</span></dt>
        <dd>
          <table
          class="propinfo" >
            <tr>
              <td><em>Values:</em></td>
              <td>sRGB | &lt;local-profile&gt; | <a>&lt;url&gt;</a> |
              (&lt;local-profile&gt; <a>&lt;url&gt;</a>)</td>
            </tr>
            <tr>
              <td><em>Initial:</em></td>
              <td>sRGB</td>
            </tr>
            <tr>
              <td><em>Media:</em></td>
              <td>visual</td>
            </tr>
          </table>
        </dd>
      </dl>
    </div>

<dl>
  <dt><span class='prop-value'>sRGB</span></dt>
  <dd>The source profile is the sRGB color space. For
  consistency with
  <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/grammar.html#scanner">CSS lexical scanning and parsing rules</a>
  ([<a href="refs.html#ref-CSS21">CSS21</a>], section G.2), the keyword "sRGB" is
  case-insensitive; however, it is recommended that the mixed
  capitalization "sRGB" be used for consistency with common
  industry practice.</dd>

  <dt><span class='prop-value'>&lt;local-profile&gt;</span></dt>
  <dd>
    <p>The source profile is a locally-stored profile. The syntax
    for &lt;local-profile&gt; is:</p>

<pre>
"local(" + &lt;string&gt; + ")"
</pre>

    <p>where &lt;string&gt; is the profile's unique ID as
    specified by <a href="http://www.color.org/">International
    Color Consortium</a>. (Note: Profile description fields do
    <em>not</em> represent a profile's unique ID. With current
    ICC proposals, the profile's unique ID is an MD5-encoded
    value within the profile header.)</p>
  </dd>

  <dt><span class='prop-value'><a>&lt;url&gt;</a></span></dt>
  <dd>The source profile is an <a>URL reference</a>
  to a color profile.</dd>

  <dt>(<span class='prop-value'>&lt;local-profile&gt; <a>&lt;url&gt;</a>)</span></dt>
  <dd>Two profiles are specified. If &lt;local-profile&gt;
  cannot be found on the local system, then the <a>&lt;url&gt;</a>
  is used.</dd>
</dl>

    <div class="propdef">
      <dl>
        <dt id="ColorProfileNameProperty"><span class="descdef-title property">'name'</span></dt>
        <dd>
          <table
          class="propinfo" >
            <tr>
              <td><em>Values:</em></td>
              <td><a>&lt;identifier&gt;</a></td>
            </tr>
            <tr>
              <td><em>Initial:</em></td>
              <td>undefined</td>
            </tr>
            <tr>
              <td><em>Media:</em></td>
              <td>visual</td>
            </tr>
          </table>
        </dd>
      </dl>
    </div>

<dl>
  <dt><span class='prop-value'><a>&lt;identifier&gt;</a></span></dt>
  <dd>The name which is used as the first parameter for <span
  class="prop-value">icc-color</span> specifications within
  <a>'fill'</a>, <a>'stroke'</a>, <a>'stop-color'</a>,
  <a>'flood-color'</a> and <a>'lighting-color'</a> property
  values to identify the color profile to use for the ICC
  color specification.  Note that if 'name' is not
  provided, it will be impossible to reference the given @color-profile
  definition.</dd>
</dl>

    <div class="propdef">
      <dl>
        <dt id="RenderingIntentProperty"><span class="descdef-title property">'rendering-intent'</span></dt>
        <dd>
          <table
           class="propinfo" >
            <tr>
              <td><em>Values:</em></td>
              <td>auto | perceptual | relative-colorimetric |<br />
               saturation | absolute-colorimetric</td>
            </tr>
            <tr>
              <td><em>Initial:</em></td>
              <td>auto</td>
            </tr>
            <tr>
              <td><em>Media:</em></td>
              <td>visual</td>
            </tr>
            <tr>
              <td><em><a
              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
              <td>no</td>
            </tr>
          </table>
        </dd>
      </dl>
    </div>

<p>The ‘rendering-intent’ descriptor
permits the specification of a color profile rendering
intent other than the default. ‘rendering-intent’ is applicable
primarily to color profiles corresponding to CMYK color
spaces. The different options cause different methods to
be used for translating colors to the color gamut of the
target rendering device:</p>
<dl>
  <dt><span class='prop-value'>auto</span></dt>
  <dd>This is the default behavior. The user agent
  determines the best intent based on the content type.
    <div class="requirement" id="assert_renderingIntentAuto">
      For image content containing an embedded profile, the User Agent MUST use the intent
      specified within the profile. Otherwise, the user agent MUST use the current profile
      and force the intent, overriding any intent that might be stored in the profile
      itself.
    </div></dd>
  <dt><span class='prop-value'>perceptual</span></dt>
  <dd>            <p>This method is often the preferred choice for images, especially when
    there are substantial differences between the source and destination
    (such as a CRT display image reproduced on a reflection print). It takes
    the colors of the source image and re-optimizes the appearance for the
    destination medium using proprietary methods. This re-optimization may
    result in colors within both the source and destination gamuts being
    changed, although perceptual transforms are supposed to maintain the
    basic artistic intent of the original in the reproduction. They will not
    attempt to correct errors in the source image.
  </p>
    <p class="note">With v2 ICC profiles there is no specified perceptual reference
      medium, which can cause interoperability problems. When v2 ICC profiles
      are used it may be safer to use the media-relative colorimetric
      rendering intent with black point compensation, instead of the perceptual
      rendering intent, unless the specific source and destination profiles to
      be used have been checked to ensure the combination produces the desired
      result.
    </p>
    <div class="requirement" id="assert_renderingIntentPerceptual">
      This method SHOULD maintain relative color values among the pixels as they are mapped
      to the target device gamut. This method MAY change pixel values that were originally
      within the target device gamut, in order to avoid hue shifts and discontinuities
      and to preserve as much as possible the overall appearance of the scene.
    </div>
  </dd>
  <dt><span class='prop-value'>saturation</span></dt>
  <dd>            <p>This option was created to preserve the relative saturation (chroma) of
    the original, and to keep solid colors pure. However, it experienced
    interoperability problems like the perceptual intent, and as solid color
    preservation is not amenable to a reference medium solution using v4
    profiles does not solve the problem. Use of this rendering intent is <em>not
      recommended</em> unless the specific source and destination profiles to be
    used have been checked to ensure the combination produces the desired
    result.
  </p>
    <div class="requirement" id="assert_renderingIntentSaturation">
      This option SHOULD preserve the relative saturation (chroma) values of the original
      pixels. Out of gamut colors SHOULD be converted to colors that have the same saturation
      but fall just inside the gamut.
    </div></dd>
  <dt><span class='prop-value'>relative-colorimetric</span></dt>
  <dd>            <p>Media-relative colorimetric 
    is required to leave source colors that fall inside the destination
    medium gamut unchanged relative to the respective media white points.
    Source colors that are out of the destination medium gamut are mapped to
    colors on the gamut boundary using a variety of different methods.</p>
    
    <p class="note">Note: the media-relative colorimetric rendering intent is often used with
      black point compensation, where the source medium black point is mapped
      to the destination medium black point as well.</p>
    
    <div class="requirement" id="assert_renderingIntentRelativeColorimetric">
      This method MUST map the source white point to the desination white point.
      If black point compensation is in use, the source black point MUST also be mapped to the destination black point.
      Adaptation algorithms SHOULD be used to adjust for the change in white point. Relative relationships of colors inside
      both source and destination gamuts SHOULD be preserved. 
      Relative relationships of colors outside the destination gamut MAY be changed.
    </div></dd>
  <dt><span class='prop-value'>absolute-colorimetric</span></dt>
  <dd><p>ICC-absolute colorimetric  is
    required to leave source colors that fall inside the destination medium
    gamut unchanged relative to the adopted white (a perfect reflecting
    diffuser). Source colors that are out of the destination medium gamut
    are mapped to colors on the gamut boundary using a variety of different
    methods. This method produces the most accurate color matching of
    in-gamut colors, but will result in highlight clipping if the
    destination medium white point is lower than the source medium white
    point. For this reason it is recommended for use <em>only</em> in applications
    that need exact color matching and where highlight clipping is not a
    concern.
  </p>
    <div class="requirement" id="assert_renderingIntentAbsoluteColorimetric">
      This method MUST disable white point matching and black point matching when converting colors.
    </div>
    In general, this option is not recommended.
  </dd>
</dl>

<p class="issue">Fallback behaviour needs to be specified, for when the
requested rendering intent does not have a corresponding table in the profile;
or when all rendering-intents are provided using the same table.</p>


<div class="ready-for-wider-review">
<h2 id="syntax">Color syntax</h2>

<p>The EBNF grammar syntax is as described in <a href="types.html#syntax">Syntax</a>.</p>

<pre>
<span id='DataTypeICCColor'><span id="icccolor">icccolor</span></span> ::= 
  ~"icc-color(" <a href="#name">name</a> (<a>comma-wsp</a> <a href="#number">number</a>)+ ")" 
  
<span id="iccnamedcolor">iccnamedcolor</span> ::= 
  ~"icc-named-color(" <a href="#name">name</a> <a>comma-wsp</a> <a href="#namedColor">namedColor</a> ")" 
  
<span id="cielabcolor">cielabcolor</span> ::=
  ~"cielab(" <a href="#lightness">lightness</a> <a>comma-wsp</a> <a href="#a-value">a-value</a> <a>comma-wsp</a> <a href="#b-value">b-value</a> ")" 
  
<span id="cielchabcolor">cielchabcolor</span> ::=
  ~"cielchab(" <a href="#lightness">lightness</a> <a>comma-wsp</a> <a href="#chroma">chroma</a> <a>comma-wsp</a> <a href="#hue">hue</a> ")" 
  
<span id="devicecolor">devicecolor</span> ::=
  <a href="#devicegray">device-gray</a> | <a href="#devicergb">devicergb</a> | <a href="#devicecmyk">devicecmyk</a> | <a href="#devicenchannel">devicenchannel</a>
  
<span id="devicegray">devicegray</span> ::=
  ~"device-gray(" <a href="#gray">gray</a> ")"
  
<span id="devicergb">devicergb</span> ::=
  ~"device-rgb(" <a href="#red">red</a> <a href="#green">green</a> <a href="#blue">blue</a> ")"
  
<span id="devicecmyk">devicecmyk</span> ::=
  ~"device-cmyk(" <a href="#cyan">cyan</a> <a href="#magenta">magenta</a> <a href="#yellow">yellow</a> <a href="#black">black</a> ")"
  
<span id="devicenchannel">devicenchannel</span> ::=
  ~"device-nchannel(" <a href="#number">number</a>+ ")"
  
<span id="name">name</span> ::=
  <a href="#namestartchar">namestartchar</a> (<a href="#namechar">namechar</a>)*
  
<span id="lightness">lightness</span> ::=
  <a href="#number">number</a>
  
<span id="a-value">a-value</span> ::=
  <a href="#number">number</a>
  
<span id="b-value">b-value</span> ::=
  <a href="#number">number</a>
  
<span id="chroma">chroma</span> ::=
  <a href="#number">number</a>
  
<span id="hue">hue</span> ::=
  <a href="#number">number</a>
  
  
<span id="gray">gray</span> ::=
  <a href="#number">number</a>
  
<span id="red">red</span> ::=
  <a href="#number">number</a>
  
<span id="green">green</span> ::=
  <a href="#number">number</a>
  
<span id="blue">blue</span> ::=
  <a href="#number">number</a>
  
<span id="cyan">cyan</span> ::=
  <a href="#number">number</a>
  
<span id="magenta">magenta</span> ::=
  <a href="#number">number</a>
  
<span id="yellow">yellow</span> ::=
  <a href="#number">number</a>
  
<span id="black">black</span> ::=
  <a href="#number">number</a>
  
<span id="namedColor">namedColor</span> ::=
  <a href="#name">name</a>
  
<span id="fallback">fallback</span> ::=
  <a href="#color">color</a>
  
<span id="color">color</span>  ::= 
  "#" <a href="#hexdigit">hexdigit</a> <a href="#hexdigit">hexdigit</a> <a href="#hexdigit">hexdigit</a> (<a href="#hexdigit">hexdigit</a> <a href="#hexdigit">hexdigit</a> <a href="#hexdigit">hexdigit</a>)?
  | ~"rgb(" <a>wsp</a>* <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a>wsp</a>* ")"
  | ~"rgb(" <a>wsp</a>* <a href="#integer">integer</a> "%" <a href="#comma">comma</a> <a href="#integer">integer</a> "%" <a href="#comma">comma</a> <a href="#integer">integer</a> "%" <a>wsp</a>* ")"
  | ~"hsl(" <a>wsp</a>* <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a>wsp</a>* ")"
  | ~"hsla(" <a>wsp</a>* <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a href="#comma">comma</a> <a href="#integer">integer</a> <a>wsp</a>* ")"
  | <a href="#color-keyword">color-keyword</a>
  
<span id="hexdigit">hexdigit</span> ::= 
  [0-9A-Fa-f]
  
<span id="number">number</span> ::= 
  <a href="#sign">sign</a>? <a href="#digit-sequence">digit-sequence</a>? "." <a href="#digit-sequence">digit-sequence</a>
  
<span id="sign">sign</span>::=
  "+" | "-"
  
<span id="integer">integer</span> ::=
  <a href="#digit-sequence">digit-sequence</a>
  
<span id="digit-sequence">digit-sequence</span> ::=
  [0-9]+
  
<span id="namestartchar">namestartchar</span> ::=
  ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [
  #xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] |
  [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] |
  [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
   
<span id="namechar">namechar</span> ::=
  <a href="#namestartchar">namestartchar</a> | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] |
  [#x203F-#x2040]
  
<span id="comma">comma</span> ::=
  ","
  
<span id="color-keyword">color-keyword</span> ::=
  ~"aliceblue" | ~"antiquewhite" | ~"aqua" | ~"aquamarine" | ~"azure" | ~"beige" | 
  ~"bisque" | ~"black" | ~"blanchedalmond" | ~"blue" | ~"blueviolet" | ~"brown" | 
  ~"burlywood" |~"cadetblue" | ~"chartreuse" | ~"chocolate" | ~"coral" | ~"cornflowerblue" |
  ~"cornsilk" | ~"crimson" | ~"cyan" | ~"darkblue" | ~"darkcyan" | ~"darkgoldenrod" | 
  ~"darkgray" | ~"darkgreen" | ~"darkgrey" | ~"darkkhaki" | ~"darkmagenta" | ~"darkolivegreen" | 
  ~"darkorange" | ~"darkorchid" | ~"darkred" | ~"darksalmon" | ~"darkseagreen" | ~"darkslateblue" | 
  ~"darkslategray" | ~"darkslategrey" | ~"darkturquoise" | ~"darkviolet" | ~"deeppink" | ~"deepskyblue" | 
  ~"dimgray" | ~"dimgrey" | ~"dodgerblue" | ~"firebrick" | ~"floralwhite" | ~"forestgreen" | 
  ~"fuchsia" | ~"gainsboro" | ~"ghostwhite" | ~"gold" | ~"goldenrod" | ~"gray" | 
  ~"grey" | ~"green" | ~"greenyellow" | ~"honeydew" | ~"hotpink" | ~"indianred" | 
  ~"indigo" | ~"ivory" | ~"khaki" | ~"lavender" | ~"lavenderblush" | ~"lawngreen" | 
  ~"lemonchiffon" | ~"lightblue" | ~"lightcoral" | ~"lightcyan" | ~"lightgoldenrodyellow" | ~"lightgray" | 
  ~"lightgreen" | ~"lightgrey" | ~"lightpink" | ~"lightsalmon" | ~"lightseagreen" | ~"lightskyblue" | 
  ~"lightslategray" | ~"lightslategrey" | ~"lightsteelblue" | ~"lightyellow" | ~"lime" | 
  ~"limegreen" | ~"linen" | ~"magenta" | ~"maroon" | ~"mediumaquamarine" | ~"mediumblue" | 
  ~"mediumorchid" | ~"mediumpurple" | ~"mediumseagreen" | ~"mediumslateblue" | ~"mediumspringgreen" |
  ~"mediumturquoise" | ~"mediumvioletred" | ~"midnightblue" | ~"mintcream" | ~"mistyrose" |
  ~"moccasin" | ~"navajowhite" | ~"navy" | ~"oldlace" | ~"olive" | ~"olivedrab" | ~"orange" | ~"orangered" | 
  ~"orchid" | ~"palegoldenrod" | ~"palegreen" | ~"paleturquoise" | ~"palevioletred" | ~"papayawhip" | 
  ~"peachpuff" | ~"peru" | ~"pink" | ~"plum" | ~"powderblue" | ~"purple" | 
  ~"red" | ~"rosybrown" | ~"royalblue" | ~"saddlebrown" | ~"salmon" | ~"sandybrown" | 
  ~"seagreen" | ~"seashell" | ~"sienna" | ~"silver" | ~"skyblue" | ~"slateblue" | 
  ~"slategray" | ~"slategrey" | ~"snow" | ~"springgreen" | ~"steelblue" | ~"tan" | 
  ~"teal" | ~"thistle" | ~"tomato" | ~"turquoise" | ~"violet" | ~"wheat" | 
  ~"white" | ~"whitesmoke" | ~"yellow" | ~"yellowgreen" 
</pre>


</div>

<!--
  <dt id="ref-BRADFORD" class="informref">[BRADFORD]</dt>
  <dd>Originally described in <cite>K.M. Lam, <i>Metamerism and Colour Constancy</i>,
    Ph.D. Thesis, University of
    Bradford, 1985.</cite>. The linearised Bradford is a simplificaton, widely used in practice, and expressible as a 3x3 matrix. See for example Lindbloom, <a href="http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html">Chromatic Adaptation</a>.</dd>
-->
