Color

Introduction

This introduction is informative, not normative.

Several properties used in SVG take a color specification. Also, external media such as images or video contain colors.

All SVG colors used as property values include a fallback specified in the sRGB color space [SRGB].

Additionally, SVG content can specify an alternate color specification using an ICC profile [ICC42]. 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 'color-interpolation').

<circle fill="rgb(205,133,63)"/>
<circle fill="peru"/>
<circle fill="rgb(80.392%, 52.157%, 24.706%)"/>
<circle fill="#CD853F"/>
<circle fill="hsl(30, 59%, 53%)"/>

<circle fill="rgba(205,133,63, 0.5)"/>

<circle fill="rgba(205,133,63, 0.25)"/>
<circle fill="rgba(205,133,63, 1.0)" fill-opacity="0.25"/>
<circle fill="rgba(205,133,63, 0.5)" fill-opacity="0.5"/>

<style>
@color-profile {
  name: acmecmyk;
  src: url(http://printers.example.com/acmecorp/model1234);
}
</style>
<circle fill="#CD853F icc-color(acmecmyk, 0.11, 0.48, 0.83, 0.00)"/>

<circle fill="#CD853F cielab(62.253188, 23.950124, 48.410653)"/>
<circle fill="#CD853F cielch(62.253188, 54.011108, 63.677091)"/>

<style>
@color-profile {
  name: FooColors;
  src: url(http://swatches.example.com/Foo);
}
</style>
<circle fill="#CD853F icc-color(FooColors, Sandy23C)"/>

<circle fill="#CD853F device-cmyk(0.11, 0.48, 0.83, 0.00)"/>

Please see the diagram below:

]]>

Color profile descriptions

Overview of color profile descriptions

The International Color Consortium has established a standard, the ICC Profile [ICC32], 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.

A color profile description 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.

The CSS @color-profile rule

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

@color-profile { <color-profile-description> }

where the <color-profile-description> has the form:

descriptor: value;
[...]
descriptor: value;

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.

The following are the descriptors for a <color-profile-description>:

sRGB

The source profile is the sRGB color space. For consistency with CSS lexical scanning and parsing rules ([CSS21], 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.

<local-profile>

The source profile is a locally-stored profile. The syntax for <local-profile> is:

"local(" + <string> + ")"

where <string> is the profile's unique ID as specified by International Color Consortium. (Note: Profile description fields do not represent a profile's unique ID. With current ICC proposals, the profile's unique ID is an MD5-encoded value within the profile header.)

<url>

The source profile is an URL reference to a color profile.

(<local-profile> <url>)

Two profiles are specified. If <local-profile> cannot be found on the local system, then the <url> is used.

<identifier>

The name which is used as the first parameter for icc-color specifications within 'fill', 'stroke', 'stop-color', 'flood-color' and 'lighting-color' 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.

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:

auto

This is the default behavior. The user agent determines the best intent based on the content type.

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.

perceptual

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.

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.

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.

saturation

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 not recommended unless the specific source and destination profiles to be used have been checked to ensure the combination produces the desired result.

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.

relative-colorimetric

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.

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.

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.

absolute-colorimetric

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 only in applications that need exact color matching and where highlight clipping is not a concern.

This method MUST disable white point matching and black point matching when converting colors.

In general, this option is not recommended.

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.

icccolor ::= 
  ~"icc-color(" name (comma-wsp number)+ ")" 
  
iccnamedcolor ::= 
  ~"icc-named-color(" name comma-wsp namedColor ")" 
  
cielabcolor ::=
  ~"cielab(" lightness comma-wsp a-value comma-wsp b-value ")" 
  
cielchabcolor ::=
  ~"cielchab(" lightness comma-wsp chroma comma-wsp hue ")" 
  
devicecolor ::=
  device-gray | devicergb | devicecmyk | devicenchannel
  
devicegray ::=
  ~"device-gray(" gray ")"
  
devicergb ::=
  ~"device-rgb(" red green blue ")"
  
devicecmyk ::=
  ~"device-cmyk(" cyan magenta yellow black ")"
  
devicenchannel ::=
  ~"device-nchannel(" number+ ")"
  
name ::=
  namestartchar (namechar)*
  
lightness ::=
  number
  
a-value ::=
  number
  
b-value ::=
  number
  
chroma ::=
  number
  
hue ::=
  number
  
  
gray ::=
  number
  
red ::=
  number
  
green ::=
  number
  
blue ::=
  number
  
cyan ::=
  number
  
magenta ::=
  number
  
yellow ::=
  number
  
black ::=
  number
  
namedColor ::=
  name
  
fallback ::=
  color
  
color  ::= 
  "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
  | ~"rgb(" wsp* integer comma integer comma integer wsp* ")"
  | ~"rgb(" wsp* integer "%" comma integer "%" comma integer "%" wsp* ")"
  | ~"hsl(" wsp* integer comma integer comma integer wsp* ")"
  | ~"hsla(" wsp* integer comma integer comma integer comma integer wsp* ")"
  | color-keyword
  
hexdigit ::= 
  [0-9A-Fa-f]
  
number ::= 
  sign? digit-sequence? "." digit-sequence
  
sign::=
  "+" | "-"
  
integer ::=
  digit-sequence
  
digit-sequence ::=
  [0-9]+
  
namestartchar ::=
  ":" | [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]
   
namechar ::=
  namestartchar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] |
  [#x203F-#x2040]
  
comma ::=
  ","
  
color-keyword ::=
  ~"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" 

DOM interfaces

Interface SVGColorProfileRule

The SVGColorProfileRule interface represents an @color-profile rule in a CSS style sheet. An @color-profile rule identifies a ICC profile which can be referenced within a given document.

Support for the SVGColorProfileRule interface is only required in user agents that support styling with CSS.

interface SVGColorProfileRule : SVGCSSRule {
  attribute DOMString src;
  attribute DOMString name;
  attribute unsigned short renderingIntent;
};

SVGColorProfileRule implements SVGRenderingIntent;

Attributes:

src (DOMString)

Corresponds to descriptor src within an @color-profile rule.

name (DOMString)

Corresponds to descriptor 'name' within an @color-profile rule.

renderingIntent (unsigned short)

The type of rendering intent, identified by one of the SVGRenderingIntent constants.