Update remaining web area to use latest rgb() and hsl() syntax (#31497)

* Update rgb/hsl syntax in web\accessibility

* Update rgb & hsl to use new syntax

Including percentage instead of number for alpha value

* Replace instances of rgba() with rgb() in web\api

Includes rewording of canvas_api\tutorial\applying)styles to use rgb instead of rgba and include a percentage value for alpha. Rename referenced canvas_rgba.png → canvas_rgb.png.

There weren't any instances of hsla()

* Update rgb/hsl syntax in web\guide

* Update rgb/hsl syntax in web\html

Remove reference to rgba in element\input\color

* Update rgb/hsl syntax in web\mathml

I've left mathcolor as it lists all the possible ways of using color, including rgb and rgba, new and old syntax.

* Update rgb/hsl syntax in web\mediia

* Update rgb/hsl syntax in web\progressive_web_apps

* Update rgb/hsl syntax in web\svg

* Update miscellaneous rgb/hsl syntax in web

Including fixing a typo in css\color

* Apply linter/prettier suggestions

* Fix some incorrect syntax found in review

* Update files/en-us/web/html/element/input/color/index.md

Co-authored-by: shubham oulkar <[email protected]>

* Update files/en-us/web/api/mutationrecord/oldvalue/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Add 'with alpha transparency' to rgb() example

This is because this section is about using rgb() to specify alpha transparency instead of the globalAlpha property, so the focus should be on changing the transparency

* Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

* Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

* Update files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

* Fix incorrect rgb syntax in html area

* Rename rgba to rgbColor

* Move related code onto the same line

* Move related code onto the same line

* Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

* Add back comma in using_css_gradients

* Update comments in color

* Add back decimal in color, and add to rgb/hsl

I removed initially because it looked out of place, but actually it was probably to demonstrate having a decimal value (since it wasn't always supported in rgb). I've added it to rgb as well as rgba, and added an equivalent to hsl (in addition to hsla) to make it obvious that both versions work with decimals.

* color syntax - make alpha values consistent

I don't think there was any reason to have different alpha values for these two rgba examples. The different syntaxes are to show how they're used, so changing the alpha value for just rgba seemed to imply that it somehow uses alpha differently from rgb.

This also brings it in line with the hsl/a examples which are consistent (also with 60% opacity)

* Remove legacy rgba/hsla syntax from mathml\mathcolor

I decided to make the decimal example .6 / .2 rather than .0 as I think that's better at showing using them, and is also consistent with https://developer.mozilla.org/en-US/docs/Web/CSS/color

* Commit prettier suggestions

As strange as it appears to be

---------

Co-authored-by: shubham oulkar <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Dipika Bhattacharya <[email protected]>

files/en-us/web/accessibility/seizure_disorders/index.md

@@ -396,7 +396,7 @@ function set_background() {
 
   // get the second item of the list of p elements
   myP = myBodyElements[1];
-  myP.style.background = "rgb(255,0,0)";
+  myP.style.background = "rgb(255 0 0)";
 }
 ```
 

files/en-us/web/accessibility/understanding_colors_and_luminance/index.md

@@ -78,7 +78,7 @@ color: #ff00ffff; /* #rrggbbaa */
 
 /* by HSL representation of the sRGB value */
 color: hsl(300 100% 50%);
-color: hsl(300deg 100% 50% / 1);
+color: hsl(300deg 100% 50% / 100%);
 
 /* by HWB representation of the sRGB value */
 color: hwb(300deg 0% 0%);

files/en-us/web/api/analysernode/fftsize/index.md

@@ -44,11 +44,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

files/en-us/web/api/analysernode/frequencybincount/index.md

@@ -41,7 +41,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5 - 1;
@@ -51,7 +51,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth;

files/en-us/web/api/analysernode/getbytefrequencydata/index.md

@@ -54,7 +54,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -64,7 +64,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

files/en-us/web/api/analysernode/getbytetimedomaindata/index.md

@@ -49,11 +49,11 @@ function draw() {
   drawVisual = requestAnimationFrame(draw);
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   const sliceWidth = (WIDTH * 1.0) / bufferLength;
   let x = 0;

files/en-us/web/api/analysernode/getfloatfrequencydata/index.md

@@ -90,16 +90,15 @@ For more complete applied examples/information, check out our [Voice-change-O-ma
       analyserNode.getFloatFrequencyData(dataArray);
 
       //Draw black background
-      canvasCtx.fillStyle = "rgb(0, 0, 0)";
+      canvasCtx.fillStyle = "rgb(0 0 0)";
       canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
       //Draw spectrum
       const barWidth = (canvas.width / bufferLength) * 2.5;
       let posX = 0;
       for (let i = 0; i < bufferLength; i++) {
         const barHeight = (dataArray[i] + 140) * 2;
-        canvasCtx.fillStyle =
-          "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)";
+        canvasCtx.fillStyle = "rgb(" + Math.floor(barHeight + 100) + " 50 50)";
         canvasCtx.fillRect(
           posX,
           canvas.height - barHeight / 2,

files/en-us/web/api/analysernode/getfloattimedomaindata/index.md

@@ -48,10 +48,10 @@ function draw() {
   drawVisual = requestAnimationFrame(draw);
   analyser.getFloatTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
   canvasCtx.beginPath();
 
   const sliceWidth = (WIDTH * 1.0) / bufferLength;

files/en-us/web/api/analysernode/index.md

@@ -108,11 +108,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

files/en-us/web/api/analysernode/maxdecibels/index.md

@@ -46,7 +46,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -56,7 +56,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

files/en-us/web/api/analysernode/mindecibels/index.md

@@ -43,7 +43,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -53,7 +53,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

files/en-us/web/api/analysernode/smoothingtimeconstant/index.md

@@ -48,7 +48,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -58,7 +58,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

files/en-us/web/api/baseaudiocontext/createanalyser/index.md

@@ -59,11 +59,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md

@@ -244,7 +244,7 @@ ball.draw();
 Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect.
 
 ```js
-ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+ctx.fillStyle = "rgb(255 255 255 / 30%)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ```
 
@@ -280,7 +280,7 @@ const ball = {
 };
 
 function draw() {
-  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.fillStyle = "rgb(255 255 255 / 30%)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
@@ -350,7 +350,7 @@ const ball = {
 };
 
 function clear() {
-  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.fillStyle = "rgb(255 255 255 / 30%)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 

files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

@@ -30,8 +30,8 @@ The valid strings you can enter should, according to the specification, be CSS {
 
 ctx.fillStyle = "orange";
 ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255, 165, 0)";
-ctx.fillStyle = "rgba(255, 165, 0, 1)";
+ctx.fillStyle = "rgb(255 165 0)";
+ctx.fillStyle = "rgb(255 165 0 / 100%)";
 ```
 
 ### A `fillStyle` example
@@ -43,9 +43,9 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 6; j++) {
-      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(
+      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)} ${Math.floor(
         255 - 42.5 * j,
-      )}, 0)`;
+      )} 0)`;
       ctx.fillRect(j * 25, i * 25, 25, 25);
     }
   }
@@ -75,7 +75,7 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 6; j++) {
-      ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(
+      ctx.strokeStyle = `rgb(0 ${Math.floor(255 - 42.5 * i)} ${Math.floor(
         255 - 42.5 * j,
       )})`;
       ctx.beginPath();
@@ -107,16 +107,16 @@ In addition to drawing opaque shapes to the canvas, we can also draw semi-transp
 
 The `globalAlpha` property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.
 
-Because the `strokeStyle` and `fillStyle` properties accept CSS rgba color values, we can use the following notation to assign a transparent color to them.
+Because the `strokeStyle` and `fillStyle` properties accept CSS rgb color values, we can use the following notation to assign a transparent color to them.
 
 ```js
 // Assigning transparent colors to stroke and fill style
 
-ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
-ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+ctx.strokeStyle = "rgb(255 0 0 / 50%)";
+ctx.fillStyle = "rgb(255 0 0 / 50%)";
 ```
 
-The `rgba()` function is similar to the `rgb()` function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).
+The `rgb()` function has an optional extra parameter. The last parameter sets the transparency value of this particular color. The valid range is specified as a percentage between `0%` (fully transparent) and `100%` (fully opaque) or as a number between `0.0` (equivalent to `0%`) and `1.0` (equivalent to `100%`).
 
 ### A `globalAlpha` example
 
@@ -158,27 +158,27 @@ draw();
 
 {{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}
 
-### An example using `rgba()`
+### An example using `rgb()` with alpha transparency
 
-In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using `rgba()` gives you a little more control and flexibility because we can set the fill and stroke style individually.
+In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using `rgb()` gives you a little more control and flexibility because we can set the fill and stroke style individually.
 
 ```js
 function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
 
   // Draw background
-  ctx.fillStyle = "rgb(255, 221, 0)";
+  ctx.fillStyle = "rgb(255 221 0)";
   ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = "rgb(102, 204, 0)";
+  ctx.fillStyle = "rgb(102 204 0)";
   ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = "rgb(0, 153, 255)";
+  ctx.fillStyle = "rgb(0 153 255)";
   ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = "rgb(255, 51, 0)";
+  ctx.fillStyle = "rgb(255 51 0)";
   ctx.fillRect(0, 112.5, 150, 37.5);
 
   // Draw semi transparent rectangles
   for (let i = 0; i < 10; i++) {
-    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
+    ctx.fillStyle = `rgb(255 255 255 / ${(i + 1) / 10})`;
     for (let j = 0; j < 4; j++) {
       ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
     }
@@ -194,7 +194,7 @@ function draw() {
 draw();
 ```
 
-{{EmbedLiveSample("An_example_using_rgba", "180", "180", "canvas_rgba.png")}}
+{{EmbedLiveSample("An_example_using_rgb_with_alpha_transparency", "180", "180", "canvas_rgb.png")}}
 
 ## Line styles
 
@@ -521,7 +521,7 @@ function draw() {
 
   const lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
   lingrad2.addColorStop(0.5, "#000");
-  lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)");
+  lingrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
 
   // assign gradients to fill and stroke styles
   ctx.fillStyle = lingrad;
@@ -559,22 +559,22 @@ function draw() {
   const radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
   radgrad.addColorStop(0, "#A7D30C");
   radgrad.addColorStop(0.9, "#019F62");
-  radgrad.addColorStop(1, "rgba(1, 159, 98, 0)");
+  radgrad.addColorStop(1, "rgb(1 159 98 / 0%)");
 
   const radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
   radgrad2.addColorStop(0, "#FF5F98");
   radgrad2.addColorStop(0.75, "#FF0188");
-  radgrad2.addColorStop(1, "rgba(255, 1, 136, 0)");
+  radgrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
 
   const radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
   radgrad3.addColorStop(0, "#00C9FF");
   radgrad3.addColorStop(0.8, "#00B5E2");
-  radgrad3.addColorStop(1, "rgba(0, 201, 255, 0)");
+  radgrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
 
   const radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
   radgrad4.addColorStop(0, "#F4F201");
   radgrad4.addColorStop(0.8, "#E4C700");
-  radgrad4.addColorStop(1, "rgba(228, 199, 0, 0)");
+  radgrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
 
   // draw shapes
   ctx.fillStyle = radgrad4;
@@ -598,7 +598,7 @@ draw();
 
 In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.
 
-The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient `#019F62 = rgba(1,159,98,1)`.
+The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient `#019F62 = rgb(1 159 98 / 100%)`.
 
 {{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}
 
@@ -740,7 +740,7 @@ function draw() {
   ctx.shadowOffsetX = 2;
   ctx.shadowOffsetY = 2;
   ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+  ctx.shadowColor = "rgb(0 0 0 / 50%)";
 
   ctx.font = "20px Times New Roman";
   ctx.fillStyle = "Black";