color-mix() function: move demo and change values to parameters #41123
Conversation
estelle
requested review from
chrisdavidmills
and removed request for
a team
github-actions
bot
added
Content:CSS
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
Preview URLs (comment last updated: 2025-09-15 12:00:23) |
| - 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 |
There was a problem hiding this comment.
The page can't start with an H3, and H2 would make it not conform to our fixed H2 sequence. I personally think it makes perfect sense as an example, since it is... an example, just without the source code.
There was a problem hiding this comment.
I can kind of understand your motive behind this change — the "Color mixer" example is an example, but it doesn't really explain how to use the color-mix() function at all; it just demonstrates the effect of the function.
However, putting it here makes for a weird page structure. I think it would be better placed inside a "Description" section, along with the stuff near the top of the page. You say you want to do that in a different PR, but I don't see how this is a useful intermediate step towards that.
Maybe you could just put the example and the stuff near the top under "Description" for now (with an extra paragraph of explanation so that it makes sense), and then develop the "Description" further in a later PR?
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
github-actions
bot
added
size/m
|
Completely rewrote the PR to add a description, and put the demo in the description |
|
Current structure makes a lot of sense to me, but will let Chris look in detail |
There was a problem hiding this comment.
@estelle I'm loving the structure now; much better. Just a few small bits for you to consider.
| ## Description | ||
|
|
||
| ## Formal syntax | ||
| 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. |
There was a problem hiding this comment.
| 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. | |
| 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 a wide range of colors to be mixed, not limited to the sRGB color space. |
There was a problem hiding this comment.
Last bit of the sentence seemed overcomplex; folks who already know a lot about color spaces will probably already know this stuff, but it won't help people that don't.
There was a problem hiding this comment.
You also explain this stuff below, but it is better explained down there.
|
|
||
| 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 [`<rectangular-color-space>`](/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). |
There was a problem hiding this comment.
| The [`<rectangular-color-space>`](/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 [`<rectangular-color-space>`](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) category 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). |
There was a problem hiding this comment.
Because it's a category, not a single color space?
|
|
||
| The [`<rectangular-color-space>`](/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`<polar-color-space>` 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`. |
There was a problem hiding this comment.
| The`<polar-color-space>` 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`<polar-color-space>` category 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 follow the color space name with 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`<polar-color-space>` 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 [`<dashed-ident>`](/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). |
There was a problem hiding this comment.
I thought we didn't usually detail things that aren't yet supported on reference pages, just on module pages? Feels like we should leave this out to me.
| - 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 |
There was a problem hiding this comment.
I feel like it would be better to include this live demo just below the first paragraph underneath the "Description" heading. After you've just descibed what it does, then you can immediately show what it does.
Having it here with a separate heading still feels too much like an "Example" section.
|
This pull request has merge conflicts that must be resolved before it can be merged. |
I noticed hue interpolation was missing, so went in to add it, then noticed the first example should be basic usage and the demo has no visible code, so moved up into the intro as this page doesn't have a description.
parameters were listed as "values" and was missing the hue interpolation method, so changed that.
we really should add a description and put all this stuff under that, but that is for a different PR.