Minor: tweaks to color-mix() and hue (#25685)

* docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): consistent use of lt gt brackets inside cssref macros * Update files/en-us/web/css/color_value/index.md Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> * docs(CSS): fix some flaws for links to CSS ref pages * Update files/en-us/web/css/hue/index.md Co-authored-by: Adam Argyle <argyle@google.com> * docs(CSS): use front-matter suggestion from Estelle on hue page, add oklch and oklab * Apply suggestions from code review * space * white space * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * creating a repo * tweaks to example, hsl -> hwb typo, explain color wheel * peru to plum, tweaks to example, intro paragraph, explain default value * Update files/en-us/web/http/browser_detection_using_the_user_agent/index.md * Update files/en-us/web/http/browser_detection_using_the_user_agent/index.md * Update files/en-us/web/css/css_colors/index.md * Link case * link --------- Co-authored-by: Brian Thomas Smith <brian@smith.berlin> Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> Co-authored-by: Adam Argyle <argyle@google.com> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
mdn · Mar 27, 2023 · 6ffb078 · 6ffb078
1 parent 27bce57
commit 6ffb078
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 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
@@ -9,13 +9,13 @@ browser-compat: css.types.color.color-mix
 
 {{CSSRef}}{{SeeCompatTable}}
 
-The **`color-mix()`** functional notation takes two {{cssxref("color_value","color")}} values and returns the result of mixing them in a given colorspace by a given amount.
+The **`color-mix()`** functional notation takes two {{cssxref("color_value","&lt;color>")}} values and returns the result of mixing them in a given colorspace by a given amount.
 
 ## Syntax
 
 ```css
-color-mix(in lch, peru, pink);
-color-mix(in lch, peru 40%, pink);
+color-mix(in lch, plum, pink);
+color-mix(in lch, plum 40%, pink);
 color-mix(in srgb, #34c9eb 20%, white);
 color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
 ```
@@ -48,13 +48,16 @@ color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
 
 ### Mixing two colors
 
-In a supporting browser the three items become more blue as a higher percentage of `#34c9eb` is mixed in.
+In a supporting browser, the items have more blue, and therefore less white, as a higher percentage of `#34c9eb` is mixed in. When no value is given, the percentage defaults to 50%.
 
 ```html
 <ul>
-  <li>10% #34c9eb</li>
-  <li>40% #34c9eb</li>
-  <li>70% #34c9eb</li>
+  <li>0%</li>
+  <li>25%</li>
+  <li>50%</li>
+  <li>75%</li>
+  <li>100%</li>
+  <li></li>
 </ul>
 ```
 
@@ -70,20 +73,37 @@ ul {
 
 li {
   padding: 10px;
+  flex: 1;
+  box-sizing: border-box;
+  font-family: monospace;
+  outline: 1px solid #34c9eb;
+  text-align: center;
 }
 ```
 
 ```css
 li:nth-child(1) {
-  background-color: color-mix(in srgb, #34c9eb 10%, white);
+  background-color: color-mix(in srgb, #34c9eb 0%, white);
 }
 
 li:nth-child(2) {
-  background-color: color-mix(in srgb, #34c9eb 40%, white);
+  background-color: color-mix(in srgb, #34c9eb 25%, white);
 }
 
 li:nth-child(3) {
-  background-color: color-mix(in srgb, #34c9eb 70%, white);
+  background-color: color-mix(in srgb, #34c9eb 50%, white);
+}
+
+li:nth-child(4) {
+  background-color: color-mix(in srgb, #34c9eb 75%, white);
+}
+
+li:nth-child(5) {
+  background-color: color-mix(in srgb, #34c9eb 100%, white);
+}
+
+li:nth-child(6) {
+  background-color: color-mix(in srgb, #34c9eb, white);
 }
 ```
 

diff --git a/files/en-us/web/css/css_colors/index.md b/files/en-us/web/css/css_colors/index.md
@@ -121,7 +121,7 @@ To see the code for this color syntax converter, [view the source on Github](htt
 
 ## See also
 
-- [CSS color adjustment](/en-us/docs/web/css/css_color_adjustment) module, and the {{cssxref("print-color-adjust")}} property.
+- [CSS color adjustment](/en-US/docs/Web/CSS/CSS_color_adjustment) module and the {{cssxref("print-color-adjust")}} property.
 - [CSS images](/en-US/docs/Web/CSS/CSS_Images) module, which is where CSS [`<gradient>`](/en-US/docs/Web/CSS/gradient) images are defined.
 - The [`VideoColorSpace`](/en-US/docs/Web/API/VideoColorSpace) interface
 - The SVG [`<feColorMatrix>`](/en-US/docs/Web/SVG/Element/feColorMatrix) element

diff --git a/files/en-us/web/css/hue/index.md b/files/en-us/web/css/hue/index.md
@@ -9,13 +9,13 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-hue
 {{CSSRef}}
 
 The **`<hue>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}} specifying a hue angle (a cylindrical polar color) in degrees of a full circle.
-It is used in color functions that accept hue expressed as a single value, specifically [`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) functional notations.
+It is used in the color functions that accept hue expressed as a single value, specifically [`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) functional notations.
 
-> **Note:** The angles corresponding to particular hues depend on the color space. For example, green in [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) and [`hsl()`](/en-US/docs/Web/CSS/color_value/hwb) which use the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space, is at `120deg`, while in [`lch()`](/en-US/docs/Web/CSS/color_value/lch), which uses the CIELAB color wheel, it is at `134.39deg`.
+> **Note:** The angles corresponding to particular hues depend on the color space. For example, green in [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), which use the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space, is at `120deg`. In [`lch()`](/en-US/docs/Web/CSS/color_value/lch), which uses the CIELAB color wheel, green is at `134.39deg`.
 
-![A color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors](hue-wheel.png)
+![A sRGB color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors](hue-wheel.png)
 
-In [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), _red_ is `0deg`, with the other colors spread around the circle, so _yellow_ is `60deg`, _green_ is `120deg`, _cyan_ is `180deg`, _blue_ is `240deg`, and _magenta_ is `300deg`.
+In the sRGB color space, for [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), _red_ is `0deg`, _yellow_ is `60deg`, _green_ is `120deg`, _cyan_ is `180deg`, _blue_ is `240deg`, and _magenta_ is `300deg`.
 
 ## Syntax
 
@@ -54,8 +54,8 @@ As an `<angle>` is periodic, normalized to the range of `0deg` to `360deg`. It i
 The following example shows the effect of changing the `hue` value of the [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) functional notation on a color.
 
 ```html
-<input type="range" min="0" max="360" value="0" step="0.1" id="hue-slider" />
-<p>Hue: <span id="hue-value">0</span></p>
+<input type="range" min="0" max="360" value="0" id="hue-slider" />
+<p>Hue: <span id="hue-value">0deg</span></p>
 <div id="box"></div>
 ```
 
@@ -66,6 +66,14 @@ div {
   margin: 10px;
   border: 1px solid black;
 }
+p {
+  font-family: sans-serif;
+}
+span {
+  font-family: monospace;
+  background: rgb(0 0 0 / 0.1);
+  padding: 3px;
+}
 #hue-slider {
   width: 90%;
 }
@@ -82,7 +90,7 @@ const hue = document.querySelector("#hue-slider");
 const box = document.querySelector("#box");
 hue.addEventListener("input", () => {
   box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
-  document.querySelector("#hue-value").textContent = hue.value;
+  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
 });
 ```