Lint: use named color if possible (1) (mdn#40622)

* Lint: use named color if possible (1)

* Fix one

Author: Josh-Cena

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md

@@ -135,9 +135,9 @@ We've also defined a cursor for the given camera, using the `cursor-*` attribute
 The basic light types in A-Frame are directional and ambient. The first type is a directional light placed somewhere on the scene while the second one reflects the light from the first type, so it looks more natural; this can be set globally. Add the new code below your previous additions — this uses the standard `<a-light>` element:
 
 ```html
-<a-light type="directional" color="#FFF" intensity="0.5" position="-1 1 2">
+<a-light type="directional" color="white" intensity="0.5" position="-1 1 2">
 </a-light>
-<a-light type="ambient" color="#FFF"></a-light>
+<a-light type="ambient" color="white"></a-light>
 ```
 
 The directional light has a white color, its intensity is set to `0.5`, and it is placed at position `-1 1 2`. The ambient light only needs a color, which is also white.
@@ -261,10 +261,10 @@ Everything is rendered properly and animating — congratulations on building yo
 
   <a-light
     type="directional"
-    color="#FFF"
+    color="white"
     intensity="0.5"
     position="-1 1 2"></a-light>
-  <a-light type="ambient" color="#FFF"></a-light>
+  <a-light type="ambient" color="white"></a-light>
 
   <a-camera position="0 1 4">
     <a-cursor color="#0095DD" opacity="0.5" scale="2 2 2"> </a-cursor>

files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md

@@ -61,7 +61,7 @@ Let's see an example piece of code that prints a red square on the canvas. Add t
 ```js
 ctx.beginPath();
 ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
+ctx.fillStyle = "red";
 ctx.fill();
 ctx.closePath();
 ```
@@ -119,7 +119,7 @@ const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
+ctx.fillStyle = "red";
 ctx.fill();
 ctx.closePath();
 

files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md

@@ -142,7 +142,7 @@ Some very simple link styling is shown below:
 
 ```css
 a {
-  color: #ff0000;
+  color: red;
 }
 
 a:hover,
@@ -153,7 +153,7 @@ a:focus {
 }
 
 a:active {
-  color: #000000;
+  color: black;
   background-color: #a60000;
 }
 ```

files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md

@@ -21,7 +21,7 @@ To complete the task, create new rules to make the links look and behave like li
 
 ```css hidden live-sample___css-js-ally-1 live-sample___css-js-ally-2 live-sample___css-js-ally-3
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
@@ -81,7 +81,7 @@ li a {
 li a:hover,
 li a:focus {
   text-decoration: none;
-  color: rgb(255 0 0);
+  color: red;
 }
 ```
 

files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md

@@ -21,7 +21,7 @@ To complete the task, update the markup to use appropriate semantic HTML. You do
 
 ```css hidden live-sample___html-ally-1 live-sample___html-ally-2 live-sample___html-ally-3 live-sample___html-ally-4
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,

files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md

@@ -21,7 +21,7 @@ To complete the task, add some WAI-ARIA semantics to make screen readers recogni
 
 ```css hidden live-sample___aria-1 live-sample___aria-2 live-sample___aria-3
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,

files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md

@@ -203,7 +203,7 @@ body {
 
 html {
   font-size: 10px;
-  background-color: #a9a9a9;
+  background-color: darkgrey;
 }
 
 body {
@@ -456,7 +456,7 @@ body {
 
 html {
   font-size: 10px;
-  background-color: #a9a9a9;
+  background-color: darkgrey;
 }
 
 body {
@@ -855,7 +855,7 @@ function toggleMusician(bool) {
   const instrument = formItems[formItems.length - 1];
   if (bool) {
     instrument.input.disabled = false;
-    instrument.label.style.color = "#000";
+    instrument.label.style.color = "black";
     instrument.input.setAttribute("aria-disabled", "false");
     hiddenAlert.textContent =
       "Instruments played field now enabled; use it to tell us what you play.";

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -163,7 +163,7 @@ body {
 
 .col1,
 .col2 {
-  background-color: #fff;
+  background-color: white;
 }
 ```
 
@@ -241,7 +241,7 @@ body {
 
 .col1,
 .col2 {
-  background-color: #fff;
+  background-color: white;
 }
 ```
 
@@ -361,7 +361,7 @@ h1 {
 
 .col1,
 .col2 {
-  background-color: #fff;
+  background-color: white;
 }
 
 @media screen and (width >= 600px) {
@@ -447,7 +447,7 @@ h1 {
 
 .col1,
 .col2 {
-  background-color: #fff;
+  background-color: white;
 }
 
 @media screen and (width >= 600px) {

files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md

@@ -53,7 +53,7 @@ nav a:visited {
   background-color: #4d7298;
   border: 2px solid #77a6b6;
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
   display: inline-block;
   text-decoration: none;
@@ -117,7 +117,7 @@ li {
   background-color: #4d7298;
   border: 2px solid #77a6b6;
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 
@@ -193,7 +193,7 @@ li {
   background-color: #4d7298;
   border: 2px solid #77a6b6;
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
   margin: 0.5em;
 }

files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md

@@ -44,7 +44,7 @@ body {
   height: 150px;
   border-radius: 5px;
   background-color: rebeccapurple;
-  color: #fff;
+  color: white;
   padding: 1em;
 }
 
@@ -114,7 +114,7 @@ body {
   height: 150px;
   border-radius: 5px;
   background-color: rebeccapurple;
-  color: #fff;
+  color: white;
   padding: 1em;
 }
 
@@ -181,13 +181,13 @@ body {
   border-radius: 5px;
   background-color: rgb(207 232 220);
   padding: 1em;
-  color: #fff;
+  color: white;
 }
 
 .box {
   background-color: rebeccapurple;
   padding: 10px;
-  color: #fff;
+  color: white;
 }
 
 .float {