From 53ebaccead29df920e58b366796bf4d0644a2782 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 14 Sep 2025 23:44:38 +0200 Subject: [PATCH 1/5] Move live demo for color-mix() function, change values to parameters --- .../web/css/color_value/color-mix/index.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index d334df343c57f90..f2b808a88674a1a 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -15,6 +15,12 @@ Choosing the correct color space is important for producing desired results. Giv - If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, Oklch (and the older LCH) work well. - Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes. +### Color mixer + +The following live demo mixes two colors, `color-one` and `color-two`, using the `color-mix()` function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. + +{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}} + ## Syntax ```css @@ -32,15 +38,15 @@ color-mix(in --swop5c, red, blue) color-mix(in lch longer hue, hsl(200deg 50% 80%), coral) ``` -### Values +### Parameters -Functional notation: `color-mix(, [], [])` +The `color-mix(, [], [])` accepts the following parameters: - {{CSSXref("<color-interpolation-method>")}} - - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} name. The following three types are available: - - ``: [`srgb`](/en-US/docs/Glossary/Color_space#srgb), [`srgb-linear`](/en-US/docs/Glossary/Color_space#srgb-linear), [`display-p3`](/en-US/docs/Glossary/Color_space#display-p3), [`a98-rgb`](/en-US/docs/Glossary/Color_space#a98-rgb), [`prophoto-rgb`](/en-US/docs/Glossary/Color_space#prophoto-rgb), [`rec2020`](/en-US/docs/Glossary/Color_space#rec2020), [`lab`](/en-US/docs/Glossary/Color_space#cielab_color_spaces), [`oklab`](/en-US/docs/Glossary/Color_space#oklab), [`xyz`](/en-US/docs/Glossary/Color_space#xyz_color_spaces), [`xyz-d50`](/en-US/docs/Glossary/Color_space#xyz), and [`xyz-d65`](/en-US/docs/Glossary/Color_space#xyz-d50). - - ``: [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). - - custom-color-space: [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) referring to a custom [@color profile](/en-US/docs/Web/CSS/@color-profile) + - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} defined as a: + - [``](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) + - [``](/en-US/docs/Web/CSS/color-interpolation-method#polar-color-space), optionally followed followed by a {{CSSXref("<hue-interpolation-method>")}}, which defaults to `shorter hue`, or + - ``, which is a [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) defined in a valie {{cssxref("@color-profile")}} > [!NOTE] > When browsers support {{cssxref("@color-profile")}}, custom color spaces may be supported. Currently, the color space must be one of the available color spaces listed in the [formal_syntax](#formal_syntax). @@ -65,12 +71,6 @@ Functional notation: `color-mix(, [ Date: Mon, 15 Sep 2025 10:19:17 +0200 Subject: [PATCH 2/5] Update files/en-us/web/css/color_value/color-mix/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/color_value/color-mix/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index f2b808a88674a1a..2aa8990ffe9aa9c 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -43,7 +43,7 @@ color-mix(in lch longer hue, hsl(200deg 50% 80%), coral) The `color-mix(, [], [])` accepts the following parameters: - {{CSSXref("<color-interpolation-method>")}} - - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} defined as a: + - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} defined as a: - [``](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) - [``](/en-US/docs/Web/CSS/color-interpolation-method#polar-color-space), optionally followed followed by a {{CSSXref("<hue-interpolation-method>")}}, which defaults to `shorter hue`, or - ``, which is a [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) defined in a valie {{cssxref("@color-profile")}} From fc1958973bbbc2584c519042bdf7add92e079f39 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 15 Sep 2025 11:56:18 +0200 Subject: [PATCH 3/5] add description --- .../web/css/color_value/color-mix/index.md | 78 +++++++++++-------- 1 file changed, 47 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index 2aa8990ffe9aa9c..bedd08605b98617 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -8,19 +8,6 @@ sidebar: cssref The **`color-mix()`** functional notation takes two {{cssxref("<color>")}} values and returns the result of mixing them in a given colorspace by a given amount. -Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case. - -- If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity. -- If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab) are appropriate, because they are designed to be perceptually uniform. -- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, Oklch (and the older LCH) work well. -- Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes. - -### Color mixer - -The following live demo mixes two colors, `color-one` and `color-two`, using the `color-mix()` function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. - -{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}} - ## Syntax ```css @@ -31,25 +18,16 @@ color-mix(in hsl, hsl(200 50 80), coral 80%) color-mix(in srgb, plum, #123456) color-mix(in lab, plum 60%, #123456 50%) -/* Custom color space */ -color-mix(in --swop5c, red, blue) - /* With hue interpolation method */ color-mix(in lch longer hue, hsl(200deg 50% 80%), coral) ``` ### Parameters -The `color-mix(, [], [])` accepts the following parameters: +The `color-mix( , [], [] )` accepts the following parameters: - {{CSSXref("<color-interpolation-method>")}} - - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} defined as a: - - [``](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) - - [``](/en-US/docs/Web/CSS/color-interpolation-method#polar-color-space), optionally followed followed by a {{CSSXref("<hue-interpolation-method>")}}, which defaults to `shorter hue`, or - - ``, which is a [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) defined in a valie {{cssxref("@color-profile")}} - - > [!NOTE] - > When browsers support {{cssxref("@color-profile")}}, custom color spaces may be supported. Currently, the color space must be one of the available color spaces listed in the [formal_syntax](#formal_syntax). + - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} and optionally a {{CSSXref("<hue-interpolation-method>")}}. - `` - : A {{CSSXref("<color>")}} value to mix. @@ -57,13 +35,51 @@ The `color-mix(, [], [` {{optional_inline}} - : A {{CSSXref("<percentage>")}} value between `0%` and `100%`, specifying the amount of the corresponding color to mix. - The two color percentages (we'll refer to them as `p1` and `p2`) are normalized as follows: - - If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`. - - If `p1` is omitted, then `p1 = 100% - p2`. - - If `p2` is omitted, then `p2 = 100% - p1`. - - If `p1 = p2 = 0%`, the function is invalid. - - If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results. - - If `p1 + p2 < 100%`, then an alpha multiplier of `p1 + p2` is applied to the resulting color. This is similar to mixing in [`transparent`](/en-US/docs/Web/CSS/named-color#transparent), with percentage `pt = 100% - p1 - p2`. +### Return value + +A ``. + +## Description + +The `color-mix()` function enables mixing two {{cssxref("<color>")}} values of any type, in a specific ratio, in a given colorspace, using either a shorter or longer hue interpolation method. Browsers support a plethora of color spaces. The color-mix function enables producing unlimited colors without limiting ourselves to the neither linear-light nor perceptually uniform sRGB color space with it's dark and grayish color ranges. + +### Choosing a color space + +Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case. + +- If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity. +- If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab) are appropriate, because they are designed to be perceptually uniform. +- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, Oklch (and the older LCH) works well. +- Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes. + +### Color interpolation method + +The {{CSSXref("<color-interpolation-method>")}} specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword and the color space the colors should be mixed in. Depending on the color space used, you can optionally direct the hue to be mixed along a longer or shorter path. + +The [``](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) includes [`srgb`](/en-US/docs/Glossary/Color_space#srgb), [`srgb-linear`](/en-US/docs/Glossary/Color_space#srgb-linear), [`display-p3`](/en-US/docs/Glossary/Color_space#display-p3), [`a98-rgb`](/en-US/docs/Glossary/Color_space#a98-rgb), [`prophoto-rgb`](/en-US/docs/Glossary/Color_space#prophoto-rgb), [`rec2020`](/en-US/docs/Glossary/Color_space#rec2020), [`lab`](/en-US/docs/Glossary/Color_space#cielab_color_spaces), [`oklab`](/en-US/docs/Glossary/Color_space#oklab), [`xyz`](/en-US/docs/Glossary/Color_space#xyz_color_spaces), [`xyz-d50`](/en-US/docs/Glossary/Color_space#xyz), and [`xyz-d65`](/en-US/docs/Glossary/Color_space#xyz-d50). + +The`` includes [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). With these you can optionally followed the color space name by a {{CSSXref("<hue-interpolation-method>")}}. This value defaults to `shorter hue`, but can also be set to `longer hue`, `increasing hue`, or `decreasing hue`. + +The [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module defines a {{cssxref("@color-profile")}} [at-rule]() for creating custom color profiles and color spaces. This is not yet supported in any browser. If and when supported, the custom color space will be declared as `in` followed by the [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) name of a valid custom color profile. Currently, the color space must be one of the available color spaces listed in the [formal_syntax](#formal_syntax). + +### Color percentages + +Each of the two colors can be declared with a `` value between `0%` and `100%`, which specifies the amount of the corresponding color to mix. The percentages are normalized if the total value of the declared percentages does not equal 100%. + +The two color percentages (we'll refer to them as `p1` and `p2`) are normalized as follows: + +- If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`. +- If `p1` is omitted, then `p1 = 100% - p2`. +- If `p2` is omitted, then `p2 = 100% - p1`. +- If `p1 = p2 = 0%`, the function is invalid. +- If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results. + - If `p1 + p2 < 100%`, then an alpha multiplier of `p1 + p2` is applied to the resulting color. This is similar to mixing in [`transparent`](/en-US/docs/Web/CSS/named-color#transparent), with percentage `pt = 100% - p1 - p2`. + +### Color mixer + +The following live demo mixes two colors, `color-one` and `color-two`, using the `color-mix()` function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. + +{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}} ## Formal syntax From bfab88a32ef1e0a17c9fa207cd7a9c8812d92713 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 15 Sep 2025 12:17:25 +0200 Subject: [PATCH 4/5] nits --- files/en-us/web/css/color_value/color-mix/index.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index bedd08605b98617..91935a1662687fa 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -12,14 +12,16 @@ The **`color-mix()`** functional notation takes two {{cssxref("<color>")}} ```css /* Polar color space */ -color-mix(in hsl, hsl(200 50 80), coral 80%) +color-mix(in hsl, hsl(200 50 80), coral) +color-mix(in hsl, hsl(200 50 80) 20%, coral 80%) /* Rectangular color space */ color-mix(in srgb, plum, #123456) color-mix(in lab, plum 60%, #123456 50%) /* With hue interpolation method */ -color-mix(in lch longer hue, hsl(200deg 50% 80%), coral) +color-mix(in lch increasing hue, hsl(200deg 50% 80%), coral) +color-mix(in lch longer hue, hsl(200deg 50% 80%) 44%, coral 16%) ``` ### Parameters @@ -27,7 +29,7 @@ color-mix(in lch longer hue, hsl(200deg 50% 80%), coral) The `color-mix( , [], [] )` accepts the following parameters: - {{CSSXref("<color-interpolation-method>")}} - - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} and optionally a {{CSSXref("<hue-interpolation-method>")}}. + - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} (one of the color spaces listed in the [formal syntax](#formal_syntax)), and, optionally, a {{CSSXref("<hue-interpolation-method>")}}. - `` - : A {{CSSXref("<color>")}} value to mix. @@ -37,7 +39,7 @@ The `color-mix( , [], [< ### Return value -A ``. +A ``; the result of mixing the colors, in the given ``, in the specified amounts and hue direction. ## Description @@ -60,7 +62,7 @@ The [``](/en-US/docs/Web/CSS/color-interpolation-method The`` includes [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). With these you can optionally followed the color space name by a {{CSSXref("<hue-interpolation-method>")}}. This value defaults to `shorter hue`, but can also be set to `longer hue`, `increasing hue`, or `decreasing hue`. -The [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module defines a {{cssxref("@color-profile")}} [at-rule]() for creating custom color profiles and color spaces. This is not yet supported in any browser. If and when supported, the custom color space will be declared as `in` followed by the [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) name of a valid custom color profile. Currently, the color space must be one of the available color spaces listed in the [formal_syntax](#formal_syntax). +The [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module defines a {{cssxref("@color-profile")}} [at-rule]() for creating custom color profiles and color spaces. This is not yet supported in any browser. If and when supported, the custom color space will be declared as `in` followed by the [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) name of a valid custom color profile. Currently, the color space must be one of the available color spaces listed in the [formal syntax](#formal_syntax). ### Color percentages From f3c61b27872ee23495ad0c4204f7546bbf8b9951 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 15 Sep 2025 13:57:09 +0200 Subject: [PATCH 5/5] values --- files/en-us/web/css/color_value/color-mix/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index 91935a1662687fa..a4e213e3f15eefb 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -31,11 +31,11 @@ The `color-mix( , [], [< - {{CSSXref("<color-interpolation-method>")}} - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} (one of the color spaces listed in the [formal syntax](#formal_syntax)), and, optionally, a {{CSSXref("<hue-interpolation-method>")}}. -- `` - - : A {{CSSXref("<color>")}} value to mix. +- {{CSSXref("<color>")}} + - : A color to mix; can be any valid `` value. -- `` {{optional_inline}} - - : A {{CSSXref("<percentage>")}} value between `0%` and `100%`, specifying the amount of the corresponding color to mix. +- {{CSSXref("<percentage>")}} {{optional_inline}} + - : A percentage value specifying the amount of the corresponding color to mix; can be any `` value between `0%` and `100%`, inclusive. ### Return value