<pre class='metadata'>

Title: CSS Color Module Level 5

Shortname: css-color

Level: 5

Status: ED

Prepare for TR: no

Group: csswg

TR: https://www.w3.org/TR/css-color-5/

ED: https://drafts.csswg.org/css-color-5/

Previous Version: https://www.w3.org/TR/2024/WD-css-color-5-20240229/

Work Status: exploring

!Delta Spec: yes

Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438

Editor: Una Kravets, Google, https://una.im, w3cid 115525

Editor: Lea Verou, Invited Expert, https://lea.verou.me/about, w3cid 52258

Former Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669

Abstract: This module extends CSS Color [[css-color-4]] to add color modification functions, custom color spaces (ICC profiles), contrast-color(), light-dark() and device-cmyk().

Repository: w3c/csswg-drafts

WPT Path Prefix: css/css-color/

WPT Display: open

</pre>

<pre class='ignored-specs'>

spec:css-color-3

</pre>

<pre class="link-defaults">

spec:css-color-4; type:dfn; text:color space

spec:css-color-4; type:dfn; text:gamut

spec:css-color-4; type:dfn; text:rectangular orthogonal color

spec:css-color-4; type:dfn; text:cylindrical polar color

spec:css-color-4; type:value; text:none

spec:css-color-4; type:value; text:srgb

spec:css-color-4; type:dfn; text:hex notation

spec:css-color-4; type:dfn; text:named colors

spec:css-color-4; type:dfn; text:modern color syntax

spec:css-color-4; type:value; text:alpha-value

spec:css-values-5; type:value; text:color

spec:css-color-adjust-1; type:value; text:light

spec:css-color-adjust-1; type:value; text:dark

spec:css-color-4; type:value; text:rec2020

</pre>

<pre class=biblio>

{

"FOGRA39": {

"title": "ISO 12647-2:2004 / Amd 1, Offset commercial and specialty printing according to ISO 12647-2, paper type 1 or 2 (gloss or matte coated offset, 115 g/m²), screen frequency 60/cm ",

"publisher": "Forschungsgesellschaft Druck e.V. Graphic Technology Research Association",

"date": "2006",

"href": "https://www.color.org/chardata/FOGRA39.xalter"

},

"FOGRA51": {

"title": "ISO 12647-2:2013, Process control for the production of half-tone colour separations, proof and production printsPart 2: Offset lithographic processes, PS 1, premium coated, 115 g/m², moderate substrate fluorescence",

"publisher": "Forschungsgesellschaft Druck e.V. Graphic Technology Research Association",

"date": "2015",

"href": "https://registry.color.org/cmyk-registry/fogra51"

},

"FOGRA55": {

"title": "CMYKOGV-based gamut exchange space",

"publisher": "Forschungsgesellschaft Druck e.V. Graphic Technology Research Association",

"date": "2021",

"href": "https://fogra.org/en/research/prepress-technology/multiprimary-printing-13003"

}

}

</pre>

<link rel="stylesheet" href="style.css" />

<style>

table.deltaE td {border: 4px solid white; padding: 6px; font-size: 1.4em; color: black;}

table.deltaE td.dE0 { background: rgb(68, 243, 91)}

table.deltaE td.dE1 { background: rgb(153, 243, 68)}

table.deltaE td.dE2 { background: rgb(217, 243, 68)}

table.deltaE td.dE3 { background: rgb(243, 240, 68)}

table.deltaE td.dE4 { background: rgb(243, 202, 68)}

table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white}

table.deltaE th {text-align: center }

/* work-around for https://github.com/tabatkins/bikeshed/issues/1799 */

div.example, div.example pre {

overflow: visible;

}

div.example>a.self-link::before {

content: "¶";

}

</style>

<script>

document.addEventListener("DOMContentLoaded", ()=>{

for (let e of document.querySelectorAll(".swatch")) {

e.tabIndex = "0";

const swatchColor = getComputedStyle(e).getPropertyValue("--color");

if (!CSS.supports('color', swatchColor)) {

e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";

e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");

}

}

});

</script>

Introduction {#intro}

=====================

<em>This section is not normative.</em>

This module adds the new functions

''contrast-color()'',

''color-mix()'' and ''light-dark()'',

and extends existing ones with [[#relative-colors|relative color syntax]].

It also extends the ''color()'' function

so that not only predefined color spaces,

but also custom color spaces defined by ICC profiles

(including calibrated CMYK)

can be used in CSS.

It also adds ''device-cmyk'',

a representation of

uncalibrated cmyk color.

<h2 id="color-syntax">The <<color>> syntax</h2>

Colors in CSS are represented by the <dfn export><<color>></dfn> type:

<pre class='prod'>

&lt;color> = <<color-base>> | currentColor | <<system-color>> |

<<contrast-color()>> | <<device-cmyk()>> | <<light-dark()>>

<dfn>&lt;color-base></dfn> = <<hex-color>> | <<color-function>> | <<named-color>> | <<color-mix()>> | transparent

<dfn>&lt;color-function></dfn> = <<rgb()>> | <<rgba()>> |

<<hsl()>> | <<hsla()>> | <<hwb()>> |

<<lab()>> | <<lch()>> | <<oklab()>> | <<oklch()>> |

<<alpha()>> |

<<color()>>

</pre>

An <dfn export>absolute color</dfn>

is a <<color>> whose computed value

has an absolute, colorimetric interpretation.

This means that the value is not:

* ''currentColor'' (which depends on the value of the 'color' property)

* a <<system-color>> (which depends on the color mode)

* <<light-dark()>> (which depends on the color mode)

* <<contrast-color()>> (which depends on the color mode)

* <<device-cmyk()>> (which has no colorimetric basis)

Nor are any of those values used inside <<color-mix()>>

or in relative color syntax.

The colors that <dfn export>resolve to sRGB</dfn> are:

- <a href="css-color-4#hex-notation">hex</a> colors

- ''rgb()'' and ''rgba()'' values, including relative colors

- ''hsl()'' and ''hsla()'' values, including relative colors

- ''hwb()'' values, including relative colors

- <a href="css-color-4#named-colors">named</a> colors

The functions that <dfn export>support legacy color syntax</dfn> are:

- ''rgb()'' and ''rgba()''

- ''hsl()'' and ''hsla()''

The <<hsl()>>, <<hsla()>>, <<hwb()>>, <<lch()>>, and <<oklch()>> [=color functions=]

are [=cylindrical polar color=] representations using a <<hue>> angle;

the other [=color functions=] use [=rectangular orthogonal color=] representations.

<!--

██ ██ ████ ██ ██

███ ███ ██ ██ ██

████ ████ ██ ██ ██

██ ███ ██ ██ ███

██ ██ ██ ██ ██

██ ██ ██ ██ ██

██ ██ ████ ██ ██

-->

<!--

https://caniuse.com/mdn-css_types_color_color-mix

-->

Mixing Colors: the ''color-mix()'' Function {#color-mix}

=====================================================

Web developers, design tools and design system developers

often use color functions to assist in scaling the design

of their component color relations.

With the increasing usage of design systems that support multiple platforms

and multiple user preferences, like the increased capability of Dark Mode in UI,

this becomes even more useful to not need to manually set color,

and to instead have a single source from which schemes are calculated.

<figure id="fig-chloropleth">

<p><img src="images/LC-picker-scale.png" alt="LC color picker" width=1168 height=1045 style="width: 40vmin"><br/>

<img src="images/LC-picker-map2.png" alt="chloropleth map of the US" width=1396 height=1014 style="width: 48vmin"></p>

<figcaption>Above, a color picker operating in CIE LCH space.

Here, a pair of colors are being used

to define a color scale

on the Chroma-Lightness plane (constant Hue).

Below, the color scale in use on a choropleth map.

</figcaption>

</figure>

<!-- from http://tristen.ca/hcl-picker/#/clh/8/267/0023A5/F8E0D6 -->

Currently Sass, calc() on HSL values, or PostCSS is used to do this.

However, preprocessors are unable to work on dynamically adjusted colors;

all current solutions are restricted to the sRGB gamut

and to the perceptual limitations of HSL

(colors are bunched up in the color wheel,

and two colors with visually different lightness,

like yellow and blue, can have the same HSL lightness).

To meet this need, the color-mix() function takes

a list of one or more <<color>> specifications

and returns the result of mixing them,

in a given <<color-space>>,

in the specified amounts.

<pre class='prod'>

<dfn>color-mix()</dfn> = color-mix( <<color-interpolation-method>>? , [ <<color>> && <<percentage [0,100]>>? ]#)

</pre>

<wpt>

parsing/color-computed-color-mix-function.html

parsing/color-valid-color-mix-function.html

</wpt>

<h3 id="color-mix-space">

Colorspace for mixing

</h3>

If no color interpolation method is specified, assume Oklab.

Otherwise, use the specified colorspace for mixing.

<h3 id="color-mix-percent-norm">

Percentage Normalization

</h3>

Percentages are required to be in the range 0% to 100%.

Negative percentages are specifically disallowed.

Percentages are normalized by [=normalizing mix percentages=].

<wpt>

color-mix-percents-01.html

color-mix-percents-02.html

</wpt>

<div class="example" id="ex-mix-syntactic">

<!-- https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fe37b01c449283352482d05fae52b9452 -->

These syntactic forms are thus all equivalent:

<pre class="lang-css">

color-mix(in lch, purple 50%, plum 50%)

color-mix(in lch, purple 50%, plum)

color-mix(in lch, purple, plum 50%)

color-mix(in lch, purple, plum)

color-mix(in lch, plum, purple)

color-mix(in lch, purple 80%, plum 80%)

</pre>

All produce a 50-50 mix of <span class="swatch" style="--color: purple"></span> purple and <span class="swatch" style="--color: plum"></span> plum,

in lch: <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%)"></span> lch(51.51% 52.21 325.8) which is <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%)"></span> rgb(68.51% 36.01% 68.29%).

However, this form is <em>not</em> the same, as the alpha is less than one:

<pre class="lang-css">

color-mix(in lch, purple 30%, plum 30%)

</pre>

This produces <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%, 0.6)"></span> lch(51.51% 52.21 325.8 / 0.6) which is <span class="swatch" style="--color: rgb(68.51%, 36.01%, 68.29%, 0.6)"></span> rgb(68.51% 36.01% 68.29% / 0.6).

</div>

<h3 id="color-mix-result">

Calculating the Result of color-mix

</h3>

<div algorithm>

To <dfn export>calculate a color-mix()</dfn>:

1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function,

with the "forced normalization" flag set to true,

letting |items| and |leftover| be the result.

2. If |leftover| is 100%,

return [=transparent black=],

converted to the specified interpolation <<color-space>>.

3. Let |alpha mult| be <code>1 - |leftover|</code>,

interpreting |leftover| as a number between 0 and 1.

4. If |items| is length 1,

set |color| to the color of that sole item,

converted to the specified interpolation <<color-space>>.

Otherwise:

1. Let |item stack| be a [=/stack=] made by reversing |items|.

(Thus, with the first item at the top of the stack.)

2. While |item stack| has length 2 or greater:

1. [=stack/Pop=] from |item stack| twice,

letting |a| and |b| be the two results in order.

Let |combined percentage| be the sum of |a| and |b|’s percentages.

2. Interpolate |a| and |b|’s colors

as described in [[css-color-4#interpolation]],

with a progress percentage equal to <code>(|b|’s percentage) / |combined percentage|)</code>.

If the specified color space is a [=cylindrical polar color=] space,

then the <<hue-interpolation-method>> controls the

interpolation of hue, as described in

[[css-color-4#hue-interpolation]].

If no <<hue-interpolation-method>> is specified,

assume ''shorter''.

3. Create a new [=mix item=] with the resulting color

and a percentage of |combined percentage|,

and [=stack/push=] it onto |item stack|.

3. Set |color| to the color of the sole remaining item in |item stack|.

5. Multiply the alpha component of |color| by |alpha mult|.

6. Return |color|.

Note: In [=cylindrical polar color=] spaces,

mixing is order-dependent,

as which direction is “shorter” or “longer” around the hue circle

can change depending on what other mixes have already been performed.

This algorithm mixes each color in the specified order,

mixing the result with the next in the list.

For [=rectangular orthogonal color=] spaces,

the order doesn't matter,

and the process can be simplified.

</div>

<wpt>

color-mix-basic-001.html

color-mix-missing-components.html

color-mix-non-srgb-001.html

parsing/color-computed-color-mix-function.html

parsing/color-invalid-color-mix-function.html

parsing/color-valid-color-mix-function.html

parsing/color-mix-out-of-gamut.html

/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.html

/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.currentcolor.html

/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.html

</wpt>

<!-- @@ Need WPT to test the sum to zero case, to generate transparent black

https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686226875

-->

<div class="example" id="ex-mix-lch-peru40">

<!--

https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F2ddd7cf7cf822f2fb2bdc32faeb2b7f6

-->

This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru

and 60% <span class="swatch" style="--color: palegoldenrod"></span> palegoldenrod.

<pre class="lang-css">color-mix(in lch, peru 40%, palegoldenrod)</pre>

The mixing is done in ''lch'' color space.

Here is a top-down view, looking along the neutral L axis:

<figure id="fig-LCH-peru-goldenrod">

<object data="images/CH-mixing.svg" width=480 height=480>

<p>A mixture of two colors, and the mixed output.

We are looking down the CIE L axis onto the ab plane.

There are two axes, labelled <em>a</em> and <em>b</em>

which cross at the origin,

which is in the centre of the plot.</p>

</object>

<figcaption>Mixtures of peru and palegoldenrod in CIE LCH.

Peru has a hue angle, measured from the positive a axis,

of 63.677 degrees

while palegoldenrod has a hue angle of 98.834 degrees.

Peru has a chroma, or distance from the central neutral axis, of 54.011

while palegoldenrod has a chroma of 31.406.

All possible mixtures lie along the curve. A 40%/60% mixture is shown.

</figcaption>

</figure>

The calculation is as follows:

* <span class="swatch" style="--color: peru"></span> peru is lch(62.253% 54.011 63.677)

* <span class="swatch" style="--color: palegoldenrod"></span> palegoldenrod is lch(91.374% 31.406 98.834)

* the mixed lightness is 62.253 * 40/100 + 91.374 * (100-40)/100 = 79.7256

* the mixed chroma is 54.011 * 40/100 + 31.406 * (100-40)/100 = 40.448

* the mixed hue is 63.677 * 40/100 + 98.834 * (100-40)/100 = 84.771

* the mixed result is <span class="swatch" style="--color: rgb(87.416% 76.036% 47.637%)"></span> lch(79.7256% 40.448 84.771)

</div>

<div class="example" id="ex-mix-lch-teal65">

<!--

https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F2fb07e0a4eef97b0d0a1950f94ab3951

-->

This example produces the mixture of teal and olive,

in ''lch'' color space,

with each lch component being 65% of the value for teal

and 35% of the value for olive.

Note: interpolating on hue and chroma

keeps the intermediate colors

as saturated as the endpoint colors.

<pre class="lang-css">color-mix(in lch, teal 65%, olive);</pre>

<figure id="fig-LCH-teal-olive">

<object data="images/CH-mixing3.svg" width=500 height=500>

<p>A mixture of two colors, and the mixed output.

We are looking down the CIE L axis onto the ab plane.

There are two axes, labelled <em>a</em> and <em>b</em>

which cross at the origin,

which is in the centre of the plot.

</p>

</object>

<figcaption>Mixtures of teal and olive.

Teal has a hue angle, measured from the positive a axis,

of 196.4524 degrees

while olive has a hue angle of 99.5746 degrees.

Teal has a chroma, or distance from the central neutral axis, of 31.6903

while olive has a chroma of 56.8124.

Mixtures lie along the dashed curve. A 65%/35% mixture is shown.

</figcaption>

</figure>

The calculation is as follows:

* sRGB <span class="swatch" style="--color: teal"></span> teal (#008080) is lch(47.9855% 31.6903 196.4524)

* sRGB <span class="swatch" style="--color: olive"></span> olive (#808000) is lch(52.1496% 56.8124 99.5746)

* mixed lightness is 47.9855 * 0.65 + 52.1496 * 0.35 = 49.4429

* mixed chroma is 31.6903 * 0.65 + 56.8124 * 0.35 = 40.4830

* mixed hue is 196.4524 * 0.65 + 99.5746 * 0.35 = 162.5452

* mixed result is lch(49.4429% 40.4830 162.5452)

* which is a slightly-blueish green: <span class="swatch" style="--color: rgb(7.7377% 52.5730% 37.3213%)"></span> rgb(7.7377% 52.5730% 37.3213%)

</div>

<div class="example" id="ex-mix-zero-sum">

In this example, both percentages are zero, so their sum is also zero:

<pre class="lang-css">color-mix(in oklch, teal 0%, olive 0%);</pre>

Thus, the result is transparent black, in the ''oklch'' color space:<br>

<span class="swatch" style="--color: transparent"></span> oklch(0% 0 none / 0)

</div>

<div class="example" id="ex-mix-three-no-percents">

In this example three colors are mixed,

and no percentages are given

so each color contributes one-third of the final result.

<pre class="lang-css">color-mix(in oklab, teal, olive, blue);</pre>

The calculation is as follows:

* <span class="swatch" style="--color: teal"></span> teal (#008080) is oklab(54.31% -0.0896 -0.0236)

* <span class="swatch" style="--color: olive"></span> olive (#808000) is oklab(58.07% -0.0428 0.1191)

* <span class="swatch" style="--color: blue"></span> blue (#0000FF) is oklab(45.20% -0.0325 -0.3115)

* mixed lightness is (54.31 + 58.07 + 45.20) / 3 = 52.53%

* mixed a is (-0.0896 + -0.0428 + -0.0325) / 3 = -0.0550

* mixed b is (-0.0236 + 0.1191 + -0.3115) / 3 = -0.0720

* mixed result is <span class="swatch" style="--color: rgb(15.62% 45.07% 58.8%)"></span> oklab(52.53% -0.0550 -0.0720)

</div>

<h3 id="color-mix-color-space-effect">

Effect of Mixing Color Space on color-mix

</h3>

The choice of mixing color space can have a large effect on the end result.

<div class="example" id="ex-mix-colorspaces-black-white">

<!--

https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F6e9bc5c573fc5afcb11e9ab47c6e1e2f

-->

This example is a 50% mix of white and black,

in three different color spaces.

<pre class="lang-css">

color-mix(in lch, white, black);

color-mix(in xyz, white, black);

color-mix(in srgb, white, black);

</pre>

The calculation is as follows:

* sRGB <span class="swatch" style="--color: white"></span> white (#FFF) is lch(100% 0 0)

* sRGB <span class="swatch" style="--color: black"></span> black (#000) is lch(0% 0 0)

* The mix in LCH is <span class="swatch" style="--color: rgb(47% 47% 47%)"></span> lch(50% 0 0)

* The mix in XYZ is <span class="swatch" style="--color: rgb(74% 74% 74%)"></span> lch(76% 0 0)

* The mix in sRGB is <span class="swatch" style="--color: rgb(50% 50% 50%)"></span> lch(53.4% 0 0)

The mix in LCH gives an L value of 50%,

a perfect mid gray, exactly as expected

(mixing in Lab would do the same,

as the Lightness axis is the same in LCH and Lab).

The mix in XYZ gives a result that is too light;

XYZ is linear-light but is not perceptually uniform.

The mix in sRGB gives a result that is a bit too light;

sRGB is neither perceptually uniform nor linear-light.

</div>

<div class="example" id="ex-mix-xyz">

This example produces the mixture of

the a red and a sky blue,

in ''xyz'' color space,

with the mixture being 75.23% of that of the red

(and thus, 24.77% of that of the blue).

<pre class="lang-css">color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));</pre>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7) which is X=0.3214, Y=0.2014, Z=0.0879.

* <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> rgb(5.64% 55.94% 85.31%) is lch(56% 49.1 257.1) which is X=0.2070, Y=0.2391, Z=0.5249.

* mixed result X=(0.3214 * 0.7523) + (0.2070 * (1 - 0.7523)) = 0.29306.

* mixed result Y=(0.2014 * 0.7523) + (0.2391 * (1 - 0.7523)) = 0.21074.

* mixed result Z=(0.0879 * 0.7523) + (0.5249 * (1 - 0.7523)) = 0.19614.

* mix result is <span class="swatch" style="--color: rgb(72.300% 38.639% 53.557%)"></span> lch(53.0304% 38.9346 352.8138) which is rgb(72.300% 38.639% 53.557%)

</div>

<div class="example" id="ex-mix-blue-white">

<!--

https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F7298c61254db05ec190c21f76ded6c7b

-->

This example is a 50% mix of white and blue,

in three different color spaces.

<pre class="lang-css">

color-mix(in lch, white, blue);

color-mix(in oklch, white, blue);

color-mix(in srgb, white, blue);

</pre>

The calcuation is as follows:

* <span class="swatch" style="--color: white"></span> white

is rgb(100% 100% 100%)

which is lch(100% 0 none)

which is oklch(100% 0 none)

* <span class="swatch" style="--color: blue"></span> blue

is rgb(0% 0% 100%)

which is lch(29.5683% 131.201 301.364)

which is oklch(45.201% 0.31321 264.052)

* <span class="swatch" style="--color: rgb(68.594% 53.794% 100%)"></span> mix

in lch is lch(64.7841% 65.6008 301.364) which is quite purple

* <span class="swatch" style="--color: rgb(45.304% 63.808% 100%)"></span> mix

in oklch is oklch(72.601% 0.15661 264.052)

* <span class="swatch" style="--color: rgb(50% 50% 100%)"></span> mix

in srgb is rgb(50% 50% 100%) which is also a bit purple

</div>

<div class="example" id="ex-hsl-gamut-map">

This example is a mix of two colors,

in ''hsl'' color space,

where one of the colors to be mixed

is outside the ''sRGB'' gamut.

<pre class="lang-css">

color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);

</pre>

The calcuation is as follows:

* <span class="swatch oog" style="--color: white"></span> color(display-p3 0 1 0)

is color(srgb -0.5116 1.01827 -0.3107) which is outside the sRGB gamut

* Converted to ''hsl''

<span class="swatch oog" style="--color: rgb(0% 99.797% 0%)"></span>

hsl(127.879 301.946 25.334)

* <span class="swatch" style="--color: yellow"></span> yellow is

<span class="swatch" style="--color: yellow"></span> hsl(60 100% 50%)

* the hue is 127.879 × 0.8 + 60 × 0.2 = 114.3032

* the saturation is 301.946 × 0.8 + 100 × 0.2 = 261.5568

* the lightness is 25.334 × 0.8 + 50 × 0.2 = 30.2672

* the mixed result is

<span class="swatch oog" style="--color: rgb(72.66% 100% 0%)"></span> hsl(114.3032 261.5568 30.2672) which is

<span class="swatch oog" style="--color: rgb(72.66% 100% 0%)"></span> color(srgb -0.3387 1.0943 -0.48899)

</div>

<div class="example" id="ex-device-cmyk-mix">

''device-cmyk()'' can be used in ''color-mix()''

but the result will depend on how the implementation

chooses to obtain a computed value.

<!-- detailed calculation is in the file

workings/device-cmyk conversion worked example.txt -->

<pre class="lang-css">

color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);

</pre>

Since the first color is at 100%,

the second color is 0% and does not affect the mixed result in any way.

The result is thus the computed value of the first color,

in CIE Lab.

To visualize the result,

let us say that the device CMYK values

are in fact to be printed using SWOP 2006 coated.

* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span>

device-cmyk(0.091777 0.043303 0.312816 0.000000) is

<span class="swatch" style="--color: rgb(98% 89% 75%)"></span>

lab(91.44% 4.142 20.52)

Suppose the implementation uses an ICC profile

to obtain ''lab()'' colors,

and in this example a FOGRA39 Coated profile is used:

* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span>

device-cmyk(0.091777 0.043303 0.312816 0.000000) is

<span class="swatch" style="--color: rgb(92.81% 91.34% 75.31%)"></span>

lab(91.840596 -3.559090 20.449159)

* The deltaE 2000 between this and the original printed color

is <strong>8.17</strong> which is clearly visible.

Now suppose another implementation uses

the naive color conversion algorithm,

giving an sRGB result.

* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span>

device-cmyk(0.091777 0.043303 0.312816 0.000000) is

<span class="swatch" style="--color: rgb(90.8223% 95.6697% 68.7184%)"></span>

rgb(90.8223% 95.6697% 68.7184%)

which is

<span class="swatch" style="--color: rgb(90.8223% 95.6697% 68.7184%)"></span>

lab(94.02% -12.31 31.79)

* The deltaE 2000 between this and the original printed color

is <strong>14.3</strong> which is very visible.

</div>

<h3 id="color-mix-with-alpha">

Effect of Non-Unity Alpha on color-mix

</h3>

So far, all the ''color-mix()'' examples

have used fully opaque colors.

To simplify the examples,

the [=premultiplied|premultilication=] and unpremultiplication steps

were omitted

because these would simply multiply by 1, and divide by 1,

so the result would be unchanged.

In the general case,

colors may have non-unity alpha components

and thus the [=premultiplied|premultiply=], interpolate, unpremultiply steps

must not be omitted.

<div class="example" id="ex-premultiply-srgb">

This example is 25% semi-opaque red

and 75% semi-opaque green.

mixed in sRGB.

Both the correct ([=premultiplied=])

and incorrect (non-premultiplied)

workings are shown.

<pre class="lang-css">

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));

</pre>

The calcuation is as follows:

* <span class="swatch" style="--color: rgb(100% 0% 0% / 0.7)"></span> rgb(100% 0% 0% / 0.7)

when premultiplied, is [0.7, 0, 0]

* <span class="swatch" style="--color: rgb(0% 100% 0% / 0.2)"></span> rgb(0% 100% 0% / 0.2)

when premultiplied, is [0, 0.2, 0]

* the premultiplied, interpolated result is

[0.7 * 0.25 + 0 * (1 - 0.25), 0 * 0.25 + 0.2 * (1 - 0.25), 0 * 0.25 + 0 * (1 - 0.25)]

which is [0.175, 0.150, 0]

* the interpolated alpha is 0.7 * 0.25 + 0.2 * (1 - 0.25) = 0.325

* the un-premultiplied result is

[0.175 / 0.325, 0.150 / 0.325, 0 / 0.325]

which is [0.53846, 0.46154, 0]

* so the mixed color is

<span class="swatch" style="--color: rgba(53.846%, 46.154%, 0%, 0.325)"></span>

color(srgb 0.53846 0.46154 0 / 0.325)

The <em>incorrect</em> calculation would be:

* the interpolated result is

[1 * 0.25 + 0 * (1 - 0.25), 0 * 0.25 + 1 * (1 - 0.25), 0 * 0.25 + 0 * (1 - 0.25)]

which is [0.25, 0.75, 0]

* so the <em>incorrect</em> mixed color is

<span class="swatch" style="--color: rgba(25%, 75%, 0%, 0.325)"></span>

color(srgb 0.25 0.75 0 / 0.325)

This is a <em>huge</em> difference; the ΔE2000 between the correct and incorrect results is 30.7!

</div>

When the percentage normalization generates an alpha multiplier,

the calculation is the same except for an additional last step.

<div class="example" id="ex-premultiply-srgb-2">

This example is similar to the previous one,

25% semi-opaque red

and 75% semi-opaque green.

mixed in sRGB.

However in this case the percentages are specified as

20% of the first color and 60% of the second.

This adds to 80% so the alpha multiplier is 0.8.

The mix percentages are then scaled

by a factor of 100/80:<br>

20% * 100/80 = 25%<br>

60% * 100/80 = 75%<br>

giving the same final mix percentages as the previous example.

<pre class="lang-css">

color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);

</pre>

The calcuation is as follows:

* <span class="swatch" style="--color: rgb(100% 0% 0% / 0.7)"></span> rgb(100% 0% 0% / 0.7)

when premultiplied, is [0.7, 0, 0]

* <span class="swatch" style="--color: rgb(0% 100% 0% / 0.2)"></span> rgb(0% 100% 0% / 0.2)

when premultiplied, is [0, 0.2, 0]

* the premultiplied, interpolated result is

[0.7 * 0.25 + 0 * (1 - 0.25), 0 * 0.25 + 0.2 * (1 - 0.25), 0 * 0.25 + 0 * (1 - 0.25)]

which is [0.175, 0.150, 0]

* the interpolated alpha is 0.7 * 0.25 + 0.2 * (1 - 0.25) = 0.325

* the un-premultiplied result is

[0.175 / 0.325, 0.150 / 0.325, 0 / 0.325]

which is [0.53846, 0.46154, 0]

* so the mixed color would be

<span class="swatch" style="--color: rgba(53.846%, 46.154%, 0%, 0.325)"></span>

color(srgb 0.53846 0.46154 0 / 0.325)

* there is a 0.8 alpha multiplier,

so the alpha of the mixed result is actually 0.325 * 0.8 = 0.260

so the mixed color is actually <span class="swatch" style="--color: rgba(53.846%, 46.154%, 0%, 0.260)"></span>

color(srgb 0.53846 0.46154 0 / 0.260)

</div>

Note: do not multiply the interpolated alpha by the alpha multiplier

and then use that to undo premultiplication.

That would be correct if the mix percentages were not scaled to sum to 100%,

but they are, so doing it this way would adjust the mixed color <em>twice</em>.

<!--

Let's move this example to the appropriate section when we have the new syntax for making these low-level adjustments

<div class="example">

This example produces the mixture of a deep green and a sky blue,

in ''lch()'' color space (the default),

with the lightness being 40% of the lightness of the green

(and thus, 60% of the lightness of the blue).

The chroma and hue of the green are used unchanged in the mixed result.

<pre class="lang-css">color-mix(rgb(0% 42.35% 33.33%) lightness 40%, rgb(41.2% 69.88% 96.64%));</pre>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(0% 42.35% 33.33%)"></span> rgb(0% 42.35% 33.33%) is lch(40.083% 32.808 171.175)

* <span class="swatch" style="--color: rgb(41.2% 69.88% 96.64%)"></span> rgb(41.2% 69.88% 96.64%) is lch(70% 42.5 258.2)

* mixed lightness is 40.083 * 0.4 + 70% * (1 - 0.4) = 58.0332

* mixed result is <span class="swatch" style="--color: rgb(26.25% 60.68% 50.72%)"></span> lch(58.0332 32.808 171.175)

* which is a <span class="swatch" style="--color: rgb(26.25% 60.68% 50.72%)"></span> rgb(26.25% 60.68% 50.72%), a lighter green

</div>

<div class="example">

This example produces the mixture of a red and a sky blue,

in ''lch()'' color space (the default),

with the hue being 75.23% of that of the red

(and thus, 24.77% of that of the blue).

The shorter hue arc will be used.

The chroma and lightness of the red are left unchanged.

<pre class="lang-css">color-mix(lch(52% 58.1 22.7) hue 75.23%, lch(56% 49.1 257.1));</pre>

<figure id="fig-LCH-red-skyblue">

<img src="images/CH-mixing2.svg" style="width: 50vmin">

<figcaption>Mixtures of a red and a sky blue.

The red has a hue angle, measured from the positive a axis,

of 22.7 degrees

while the blue has a hue angle of 257.1 degrees.

The red has a chroma, or distance from the central neutral axis, of 58.1

and the chroma is not interpolated here, just the hue.

Thus, mixtures lie along the dashed circle.

</figcaption>

</figure>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> lch(52% 58.1 22.7)

* <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> lch(56% 49.1 257.1)

* hue difference is |257.1 - 22.7| = 234.4, which is greater than 180; the shorter arc is 54.4 degrees.

* mixed hue is (22.7 + 360) * 0.7523 +(257.1 * 0.2477 = 351.59 degrees

* mixed result is <span class="swatch" style="--color: rgb(80.672% 28.822% 55.255%)"></span> lch(52% 58.1 351.59)

</div>

<div class="example">

This example produces the mixture of a red and a sky blue,

in ''lch()'' color space (the default),

with the hue being 75.23% of that of the red

(and thus, 24.77% of that of the blue).

The longer hue arc has been specified.

The chroma and lightness of the red are left unchanged.

<pre class="lang-css">color-mix(lch(52% 58.1 22.7) hue longer 75.23%, lch(56% 49.1 257.1) );</pre>

<figure id="fig-LCH-red-skyblue-2">

<img src="images/CH-mixing2b.svg" style="width: 50vmin">

<figcaption>Mixtures of a red and a sky blue.

The red has a hue angle, measured from the positive a axis,

of 22.7 degrees

while the blue has a hue angle of 257.1 degrees.

The red has a chroma, or distance from the central neutral axis, of 58.1

and the chroma is not interpolated here, just the hue.

Thus, mixtures lie along the dashed circle.

</figcaption>

</figure>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> lch(52% 58.1 22.7)

* <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> lch(56% 49.1 257.1)

* hue difference is |257.1 - 22.7| = 234.4, which is greater than 180, but the long arc was requested.

* mixed hue is 22.7 * 0.7523 + 257.1 * 0.2477 = 80.76

* mixed result is <span class="swatch" style="--color: rgb(61.11% 45.85% 0.41%)"></span> lch(52% 58.1 80.76)

</div>

<div class="example">

This example produces the mixture of

the same two colors as the previous example

(a red and a sky blue),

in ''lch()'' color space (the default),

with the hue being 75.23% of that of the red

(and thus, 24.77% of that of the blue).

This time, the lightness is set to 68.4% and

the chroma is left unchanged.

<pre class="lang-css">color-mix(rgb(82.02% 30.21% 35.02%) hue 75.23% lightness 68.4%, rgb(5.64% 55.94% 85.31%) );</pre>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)

* <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> rgb(5.64% 55.94% 85.31%) is lch(56% 49.1 257.1)

* mixed hue is 22.7 * 0.7523 + 257.1 * 0.2477 = 80.76

* new lightness is specified as 68.4%

* mixed result is <span class="swatch" style="--color: rgb(79.67% 62.48% 22.09%)"></span> lch(68.4% 58.1 80.76) which is rgb(79.67% 62.48% 22.09%)

</div>

<div class="example">

This example produces the mixture of red and yellow,

in ''lch()'' color space (the default),

with the lightness being 30% of the lightness of red

(and thus, 70% of the lightness of yellow).

The chroma and hue of red are left unchanged.

<pre class="lang-css">color-mix(red lightness 30%, yellow );</pre>

The calculation is as follows:

* sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)

* sRGB <span class="swatch" style="--color: yellow"></span> yellow (#FF0) is lch(97.6071% 94.7077 99.5746)

* mixed lightness is 54.2917 * 0.3 + 97.6071 * 0.7 = 84.6125

* mixed result is <span class="swatch oog"></span> lch(84.6125% 106.8390 40.8526)

* which is a very light, saturated red

* (and well outside the gamut of sRGB: rgb(140.4967% 51.2654% 32.6891%))

* even outside the gamut of P3: color(display-p3 1.3033 0.5756 0.4003)

This example demonstrates that not all colors which can be mixed, can be displayed on current devices.

</div>

-->

<!--

<img src="images/mix_red_yellow_lightness30.png" alt="Result of color-mix(red, yellow, lightness(30%)" />

this image incorrectly shows red and yellow to be outside gamut as well, which is confusing.

it also shows the result color after per-component clipping, which is not desirable -->

<!--

<img src="images/mix_red_yellow_65.png" alt="Result of color-mix(red, yellow, 65%" /> -->

<!-- todo: example that specifies a different color space -->

<!-- worked example in Lab space

with 38% of a and 38% of b

showing desaturated result compared to LCH interpolation

red=[52, 58.1, 22.7]

Array(3) [ 52, 58.1, 22.7 ]

blue=[56, 49.1, 257.1]

Array(3) [ 56, 49.1, 257.1 ]

red_lab=LCH_to_Lab(red)

Array(3) [ 52, 53.59946299740792, 22.42114105904291 ]

blue_lab=LCH_to_Lab(blue)

Array(3) [ 56, -10.961580696137688, -47.860774634788996 ]

result_lab=[red_lab[0], 0.38*red_lab[1]+0.62*blue_lab[1], 0.38*red_lab[2]+0.62*blue_lab[2]]

Array(3) [ 52, 13.571615907409644, -21.153646671132876 ]

result_lch=Lab_to_LCH(result_lab)

Array(3) [ 52, 25.132956965414664, 302.683148992448 ]

result_rgb=LCH_to_sRGB(result_lch)

Array(3) [ 0.524461282381659, 0.4582102541032295, 0.6295269395052022 ]

which is rgb(52.446% 45.821% 62.953%)

<div class="example">

This example produces the mixture of

the same two colors as the previous example

(a red and a sky blue),

in Lab color space,

with 38% of a and 38% of b.

The lightness of the red is left unchanged.

This shows a desaturated result, compared to LCH interpolation,

because interpolation is in a straight line on the <em>a,b</em> plane

and can thus pass close to the central, neutral axis.

<pre class="lang-css">color-mix(lab rgb(82.02% 30.21% 35.02%) a 38% b 38%, rgb(5.64% 55.94% 85.31%));</pre>

<figure id="fig-Lab-red-skyblue">

<img src="images/CH-mixing2c.svg" style="width: 50vmin">

<figcaption>Mixtures of a red and a sky blue.

The red has a hue angle, measured from the positive a axis,

of 22.7 degrees

while the blue has a hue angle of 257.1 degrees.

Interpolation is on the a,b plane.

Thus, mixtures lie along the dashed line

and pass closer to the neutral axis.

</figcaption>

</figure>

The calculation is as follows:

* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lab(52% 53.599 22.421)

* <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> rgb(5.64% 55.94% 85.31%) is lab(56% -10.962 -47.861)

* a is (53.599 * 0.38) + (-10.962 * 0.62) = 13.572

* b is (22.421 * 0.38) + (-47.861 * 0.62) = -21.154

* result is <span class="swatch" style="--color: rgb(52.446% 45.821% 62.953%)"></span> lab(52% 13.572 -21.154) which is rgb(52.446% 45.821% 62.953%)

</div>

-->

<!--

████████ ████████ ██ ███ ████████ ████ ██ ██ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

████████ ██████ ██ ██ ██ ██ ██ ██ ██ ██████

██ ██ ██ ██ █████████ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ████████ ████████ ██ ██ ██ ████ ███ ████████

-->

<h2 id="relative-colors">

Relative Colors

</h2>

<h3 id="rcs-intro">

Processing Model for Relative Colors

</h3>

In previous levels of this specification,

the color functions could only specify colors in an absolute manner,

by directly specifying all of the color components.

The new <dfn export>relative color</dfn> syntax

extends [=modern color syntax=]

to allow existing colors to be modified

using the color functions:

if an <dfn>origin color</dfn> is specified,

then each color component

(and the alpha component, if specified)

can <em>either</em> be directly specified,

or taken from the origin color

(and possibly modified with [=math functions=]).

The origin color and the relative color need not use the same color function.

<dfn export>Required conversion</dfn>:

All operations take part in the

[=color space=] of the [=relative color=] function;

if the

<dfn export>originally specified color space</dfn>

for the [=origin color=] used a different color function,

it's first converted into the chosen color function,

so it has meaningful values for the components,

and [=component keywords=]

refer to the color space of the relative color,

<em>not</em> the [=origin color=].

If the alpha value of the relative color is omitted,

it defaults to that of the [=origin color=]

(rather than defaulting to ''100%'', as it does in the absolute syntax).

When relative color syntax is used,

<strong>color component</strong> values,

whether directly specified

or arising from color space conversion,

are <em>not clamped</em> to the reference ranges but are retained as-is.

This preserves out of gamut values,

if the destination color space is capable of representing them.

However, when relative color syntax is used,

<strong>alpha component</strong> values

whether directly specified

or arising from color space conversion,

<em>are</em> clamped to the reference range.