diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
index dd905545927ca65..a3c03f6ddc3ce15 100644
--- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
+++ b/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>
diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 3929bf3deac691e..45a2d0b2cb779ce 100644
--- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/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();
 
diff --git a/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md b/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md
index 232935423026225..a650d66dd395a59 100644
--- a/files/en-us/learn_web_development/core/accessibility/css_and_javascript/index.md
+++ b/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;
 }
 ```
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
index a84e351fc5a0fdd..e78be2753551be0 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
+++ b/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;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
index 56636bfbcbf8856..2f40ee4c702573c 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
+++ b/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,
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
index 2e73c0f52ae5021..988fc931bff4895 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
+++ b/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,
diff --git a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md b/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md
index 72fb504f2f52b5f..84b19545cf84910 100644
--- a/files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md
+++ b/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.";
diff --git a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md
index cdd9dbad0663d0a..29dbfa3ba6d8ce7 100644
--- a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md
+++ b/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) {
diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md
index 8f3e86c5695cbd6..acf5e7f4a839168 100644
--- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md
+++ b/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;
 }
diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md
index b25e6f4e9305224..f32a58e37fbde24 100644
--- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md
index cdb7de6641d8fe9..0a42a0c8e52ef6a 100644
--- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md
@@ -37,7 +37,7 @@ body {
   background-color: #4d7298;
   border: 2px solid #77a6b6;
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 
@@ -84,7 +84,7 @@ body {
 }
 .grid > * {
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 
@@ -177,7 +177,7 @@ body {
   background-color: #4d7298;
   border: 2px solid #77a6b6;
   border-radius: 0.5em;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 
@@ -306,7 +306,7 @@ body {
 
 .tags > * {
   background-color: #999;
-  color: #fff;
+  color: white;
   padding: 0.2em 0.8em;
   border-radius: 0.2em;
   font-size: 80%;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
index 583e09aef94e908..56b93c81c415edf 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
@@ -374,9 +374,9 @@ Paste the following styles into `item.component.css`.
 }
 
 .btn-save {
-  background-color: #000;
-  color: #fff;
-  border-color: #000;
+  background-color: black;
+  color: white;
+  border-color: black;
 }
 
 .btn-save:hover {
@@ -384,8 +384,8 @@ Paste the following styles into `item.component.css`.
 }
 
 .btn-save:focus {
-  background-color: #fff;
-  color: #000;
+  background-color: white;
+  color: black;
 }
 
 .checkbox-wrapper {
@@ -394,7 +394,7 @@ Paste the following styles into `item.component.css`.
 
 .btn-warn {
   background-color: #b90000;
-  color: #fff;
+  color: white;
   border-color: #9a0000;
 }
 
@@ -404,7 +404,7 @@ Paste the following styles into `item.component.css`.
 
 .btn-warn:active {
   background-color: #e30000;
-  border-color: #000;
+  border-color: black;
 }
 
 .sm-text-input {
@@ -443,7 +443,7 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but
   width: 1.25em;
   height: 1.25em;
   border: 2px solid #ccc;
-  background: #fff;
+  background: white;
 }
 
 /* checked mark aspect */
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md
index 5657158d14550a8..653cf1378d9e164 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md
@@ -57,8 +57,8 @@ body {
 }
 
 .btn {
-  color: #000;
-  background-color: #fff;
+  color: black;
+  background-color: white;
   border: 2px solid #cecece;
   padding: 0.35rem 1rem 0.25rem 1rem;
   font-size: 1rem;
@@ -78,8 +78,8 @@ body {
 }
 
 .btn-primary {
-  color: #fff;
-  background-color: #000;
+  color: white;
+  background-color: black;
   width: 100%;
   padding: 0.75rem;
   font-size: 1.3rem;
@@ -92,9 +92,9 @@ body {
 }
 
 .btn-primary:focus {
-  color: #000;
+  color: black;
   outline: none;
-  border: #000 solid 2px;
+  border: black solid 2px;
   background-color: #d7ecff;
 }
 
@@ -136,7 +136,7 @@ label {
 .lg-text-input {
   width: 100%;
   padding: 1rem;
-  border: 2px solid #000;
+  border: 2px solid black;
   display: block;
   box-sizing: border-box;
   font-size: 1rem;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
index c2de90f2dae8369..2a4cc0de95b58ca 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
@@ -311,7 +311,7 @@ input[type="text"] {
   border-radius: 0;
 }
 body {
-  background-color: #f5f5f5;
+  background-color: whitesmoke;
   color: #4d4d4d;
   font:
     1.6rem/1.25 Arial,
@@ -339,7 +339,7 @@ body {
   text-transform: capitalize;
 }
 .btn.toggle-btn {
-  border-color: #d3d3d3;
+  border-color: lightgray;
   border-width: 1px;
 }
 .btn.toggle-btn[aria-pressed="true"] {
@@ -349,14 +349,14 @@ body {
 .btn__danger {
   background-color: #ca3c3c;
   border-color: #bd2130;
-  color: #fff;
+  color: white;
 }
 .btn__filter {
   border-color: lightgrey;
 }
 .btn__primary {
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 .btn-group {
   display: flex;
@@ -405,7 +405,7 @@ body {
 /* End global styles */
 /* General app styles */
 .todoapp {
-  background: #fff;
+  background: white;
   box-shadow:
     0 2px 4px 0 rgb(0 0 0 / 20%),
     0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
@@ -441,7 +441,7 @@ body {
   text-align: center;
 }
 .input__lg {
-  border: 2px solid #000;
+  border: 2px solid black;
   padding: 2rem;
 }
 .input__lg:focus-visible {
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md
index e1f7227111e1a97..49738964f4a2506 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md
@@ -149,7 +149,7 @@ Let's now create our `Alert` component and see how we can read values from the s
      align-items: center;
      border-radius: 0.2rem;
      background-color: #565656;
-     color: #fff;
+     color: white;
      font-weight: 700;
      padding: 0.5rem 1.4rem;
      font-size: 1.5rem;
@@ -157,7 +157,7 @@ Let's now create our `Alert` component and see how we can read values from the s
      opacity: 95%;
    }
    div p {
-     color: #fff;
+     color: white;
    }
    div svg {
      height: 1.6rem;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
index e2b18f039ec43f7..1c512ffba2ffb4d 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
@@ -456,7 +456,7 @@ body {
   font:
     1.6rem/1.25 Arial,
     sans-serif;
-  background-color: #f5f5f5;
+  background-color: whitesmoke;
   color: #4d4d4d;
 }
 @media screen and (width >= 620px) {
@@ -480,14 +480,14 @@ body {
 }
 .btn.toggle-btn {
   border-width: 1px;
-  border-color: #d3d3d3;
+  border-color: lightgray;
 }
 .btn.toggle-btn[aria-pressed="true"] {
   text-decoration: underline;
   border-color: #4d4d4d;
 }
 .btn__danger {
-  color: #fff;
+  color: white;
   background-color: #ca3c3c;
   border-color: #bd2130;
 }
@@ -495,8 +495,8 @@ body {
   border-color: lightgrey;
 }
 .btn__primary {
-  color: #fff;
-  background-color: #000;
+  color: white;
+  background-color: black;
 }
 .btn__primary:disabled {
   color: darkgrey;
@@ -549,7 +549,7 @@ body {
 /* END GLOBAL STYLES */
 
 .todoapp {
-  background: #fff;
+  background: white;
   margin: 2rem 0 4rem 0;
   padding: 1rem;
   position: relative;
@@ -586,7 +586,7 @@ body {
 }
 .input__lg {
   padding: 2rem;
-  border: 2px solid #000;
+  border: 2px solid black;
 }
 .input__lg:focus {
   border-color: #4d4d4d;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
index df511de3d7c73de..9b7851d897695d3 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
@@ -126,7 +126,7 @@ body {
     Helvetica,
     Arial,
     sans-serif;
-  background-color: #f5f5f5;
+  background-color: whitesmoke;
   color: #4d4d4d;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -178,7 +178,7 @@ Update your `App.vue` file's `<style>` element so it looks like so:
   text-transform: capitalize;
 }
 .btn__danger {
-  color: #fff;
+  color: white;
   background-color: #ca3c3c;
   border-color: #bd2130;
 }
@@ -189,8 +189,8 @@ Update your `App.vue` file's `<style>` element so it looks like so:
   outline-color: #c82333;
 }
 .btn__primary {
-  color: #fff;
-  background-color: #000;
+  color: white;
+  background-color: black;
 }
 .btn-group {
   display: flex;
@@ -249,7 +249,7 @@ Update your `App.vue` file's `<style>` element so it looks like so:
 }
 /* End global styles */
 #app {
-  background: #fff;
+  background: white;
   margin: 2rem 0 4rem 0;
   padding: 1rem;
   padding-top: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
index 2303892eec1afce..c20ea93411699ac 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
@@ -47,7 +47,7 @@ The finished example should look like this:
 
 ```css hidden live-sample___advanced-text
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
index 84f5c71ebddc424..5777b98c40c0e17 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
@@ -31,7 +31,7 @@ To complete this task:
 
 ```css hidden live-sample___video-1 live-sample___audio-1
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
index 52546a2c7398639..4ed29ef80496e23 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
@@ -25,7 +25,7 @@ To complete the task:
 
 ```css hidden live-sample___forms-buttons-1 live-sample___forms-buttons-2 live-sample___forms-buttons-3 live-sample___forms-buttons-4 live-sample___forms-buttons-5 live-sample___forms-buttons-6
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
index d641aabcdf5a78d..1d7147ac6110d63 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
@@ -37,7 +37,7 @@ The crafty anaconda likes to slither around the page, traveling rapidly by way o
 
 ```css hidden live-sample___text-basics-1 live-sample___text-basics-2 live-sample___text-basics-3 live-sample___text-basics-4
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
index 6243e456eae4d80..b5b4d803dfc9405 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
@@ -31,7 +31,7 @@ To complete the task:
 
 ```css hidden live-sample___images-1 live-sample___images-2 live-sample___images-3
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
index 254dc7921b2620e..1e298da552d829e 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
@@ -41,7 +41,7 @@ To complete the task, update the links as follows:
 
 ```css hidden live-sample___links-1
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
@@ -121,7 +121,7 @@ To complete the task, update the links as follows:
 
 ```css hidden live-sample___links-2
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
@@ -208,7 +208,7 @@ To complete the task:
 
 ```css hidden live-sample___links-3
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md b/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md
index fe02652f2835b56..aee345518bb51b9 100644
--- a/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md
@@ -57,11 +57,7 @@ article {
   max-width: 500px;
   padding: 10px;
   background-color: red;
-  background-image: linear-gradient(
-    to bottom,
-    rgb(0 0 0 / 0%),
-    rgb(0 0 0 / 25%)
-  );
+  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 25%));
 }
 
 .simple {
@@ -95,7 +91,7 @@ You can also specify multiple box shadows in a single `box-shadow` declaration,
 </article>
 ```
 
-```css-nolint
+```css
 p {
   margin: 0;
 }
@@ -104,20 +100,17 @@ article {
   max-width: 500px;
   padding: 10px;
   background-color: red;
-  background-image: linear-gradient(
-    to bottom,
-    rgb(0 0 0 / 0%),
-    rgb(0 0 0 / 25%)
-  );
+  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 25%));
 }
 
 .multiple {
-  box-shadow: 1px 1px 1px black,
-              2px 2px 1px black,
-              3px 3px 1px red,
-              4px 4px 1px red,
-              5px 5px 1px black,
-              6px 6px 1px black;
+  box-shadow:
+    1px 1px 1px black,
+    2px 2px 1px black,
+    3px 3px 1px red,
+    4px 4px 1px red,
+    5px 5px 1px black,
+    6px 6px 1px black;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md b/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
index 2c76f9e3f25a320..081f80a17698b87 100644
--- a/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md
@@ -489,7 +489,7 @@ There are a variety of styles that you can use for borders. In the example below
   background-color: #567895;
   border: 5px solid #0b385f;
   border-bottom-style: dashed;
-  color: #fff;
+  color: white;
 }
 
 h2 {
diff --git a/files/en-us/learn_web_development/core/styling_basics/box_model/index.md b/files/en-us/learn_web_development/core/styling_basics/box_model/index.md
index 183040411881402..31cb4413ce32888 100644
--- a/files/en-us/learn_web_development/core/styling_basics/box_model/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/box_model/index.md
@@ -600,7 +600,7 @@ ul {
   font-family: sans-serif;
   display: flex;
   list-style: none;
-  border: 1px solid #000;
+  border: 1px solid black;
 }
 
 li {
@@ -609,14 +609,14 @@ li {
 
 .links-list a {
   background-color: rgb(179 57 81);
-  color: #fff;
+  color: white;
   text-decoration: none;
   padding: 1em 2em;
 }
 
 .links-list a:hover {
   background-color: rgb(66 28 40);
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md
index 79dde66c45d42eb..5b8354c995a5292 100644
--- a/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md
@@ -204,7 +204,7 @@ body {
 /* adds styles to the already existing `layout` layer */
 @layer layout {
   main {
-    color: #000;
+    color: black;
   }
 }
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md
index 7dc70d12f266f66..3d77945aed449e9 100644
--- a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md
@@ -130,7 +130,7 @@ body {
 h1 + p {
   font-weight: bold;
   background-color: #333;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 ```
@@ -171,7 +171,7 @@ body {
 h1 ~ p {
   font-weight: bold;
   background-color: #333;
-  color: #fff;
+  color: white;
   padding: 0.5em;
 }
 ```
diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
index f8e2b8826925882..9ad3afd39f06b83 100644
--- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
@@ -313,7 +313,7 @@ This behavior helps avoid repetition in your CSS. A common practice is to define
 ```css live-sample___mixing-rules
 h2 {
   font-size: 2em;
-  color: #000;
+  color: black;
   font-family: Georgia, "Times New Roman", Times, serif;
 }
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/images_media_forms/index.md b/files/en-us/learn_web_development/core/styling_basics/images_media_forms/index.md
index 6a832f62a95f778..13ffe3b8ecce177 100644
--- a/files/en-us/learn_web_development/core/styling_basics/images_media_forms/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/images_media_forms/index.md
@@ -234,7 +234,7 @@ label {
 ```css live-sample___form
 input[type="text"],
 input[type="email"] {
-  border: 2px solid #000;
+  border: 2px solid black;
   margin: 0 0 1em 0;
   padding: 10px;
   width: 80%;
@@ -246,7 +246,7 @@ input[type="submit"] {
   border-radius: 5px;
   padding: 10px 2em;
   font-weight: bold;
-  color: #fff;
+  color: white;
 }
 
 input[type="submit"]:hover,
diff --git a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
index d5b299cb4cf7b9e..83ced6a8b49f29f 100644
--- a/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/organizing/index.md
@@ -109,7 +109,7 @@ You may have used a CSS property in a specific way to get around older browser i
 ```css
 .box {
   background-color: red; /* fallback for older browsers that don't support gradients */
-  background-image: linear-gradient(to right, #ff0000, #aa0000);
+  background-image: linear-gradient(to right, red, #aa0000);
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md
index 67c42a7bf8c9e9a..b8c04718731a3e9 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md
@@ -67,7 +67,7 @@ You should use `border`, `border-radius`, `background-image`, and `background-si
 
 ```css
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   border-radius: 10px;
   background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
   background-size: cover;
@@ -75,7 +75,7 @@ You should use `border`, `border-radius`, `background-image`, and `background-si
 
 h2 {
   background-color: rgb(0 0 0 / 50%);
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
index 4f69ccc39627bff..64287b517428475 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
@@ -29,7 +29,7 @@ Your final result should look like the image below:
 
 ```css live-sample___object-fit
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   width: 400px;
   height: 200px;
 }
@@ -87,7 +87,7 @@ body {
   font: 1.2em / 1.5 sans-serif;
 }
 .my-form {
-  border: 2px solid #000;
+  border: 2px solid black;
   padding: 5px;
 }
 ```
@@ -101,7 +101,7 @@ Here's an example solution for the task:
 
 ```css
 .my-form {
-  border: 2px solid #000;
+  border: 2px solid black;
   padding: 5px;
 }
 
@@ -170,7 +170,7 @@ To complete the task:
 }
 
 body {
-  background-color: #fff;
+  background-color: white;
   color: #333;
   font:
     1em / 1.4 Helvetica Neue,
diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md
index fb46dcd8415bce5..6a009da9690543c 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md
@@ -247,7 +247,7 @@ a:hover {
 
 tr:nth-child(even) {
   background-color: #333;
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md
index ae051a5a9eb6c51..269cb03c0bf3694 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md
@@ -50,7 +50,7 @@ body {
 }
 
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   width: 400px;
   margin-bottom: 1em;
 }
@@ -109,7 +109,7 @@ body {
 }
 
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   width: 400px;
   margin-bottom: 1em;
 }
@@ -178,7 +178,7 @@ body {
   padding: 1em;
 }
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   margin-bottom: 1em;
   width: 500px;
 }
diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/values/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/values/index.md
index ef111166333803b..e9d4d639ec2afcd 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/values/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/values/index.md
@@ -171,7 +171,7 @@ Your final result should look like the image below:
 
 ```css live-sample___position
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
   height: 350px;
 }
 
diff --git a/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md b/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
index 1e18b8e2049e7b4..b8625a77a85ee04 100644
--- a/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
+++ b/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
@@ -146,7 +146,7 @@ Let's start with some simple rectangles.
 2. Next, add the following lines to the bottom of your JavaScript:
 
    ```js
-   ctx.fillStyle = "rgb(255 0 0)";
+   ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 150);
    ```
 
@@ -155,7 +155,7 @@ Let's start with some simple rectangles.
 3. Let's add another rectangle into the mix — a green one this time. Add the following at the bottom of your JavaScript:
 
    ```js
-   ctx.fillStyle = "rgb(0 255 0)";
+   ctx.fillStyle = "green";
    ctx.fillRect(75, 75, 100, 100);
    ```
 
@@ -211,7 +211,7 @@ We'll be using some common methods and properties across all of the below sectio
 A typical, simple path-drawing operation would look something like so:
 
 ```js
-ctx.fillStyle = "rgb(255 0 0)";
+ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.moveTo(50, 50);
 // draw your path
@@ -233,7 +233,7 @@ Let's draw an equilateral triangle on the canvas.
 2. Next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. That's where we'll start drawing our triangle.
 
    ```js
-   ctx.fillStyle = "rgb(255 0 0)";
+   ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ```
diff --git a/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md b/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md
index d99eba47af37d9f..5256f2147be25e7 100644
--- a/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md
@@ -475,14 +475,14 @@ And then style the label to act like a button, which, when pressed, will open th
 label[for="file"] {
   box-shadow: 1px 1px 3px #ccc;
   background: linear-gradient(to bottom, #eee, #ccc);
-  border: 1px solid rgb(169 169 169);
+  border: 1px solid darkgrey;
   border-radius: 5px;
   text-align: center;
   line-height: 1.5;
 }
 
 label[for="file"]:hover {
-  background: linear-gradient(to bottom, #fff, #ddd);
+  background: linear-gradient(to bottom, white, #ddd);
 }
 
 label[for="file"]:active {
diff --git a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
index 83206e27388443e..3aa63dc63cbea59 100644
--- a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
@@ -255,7 +255,7 @@ Next a different `background` color is set on the odd-numbered `<option>` elemen
 
 ```css live-sample___third-render live-sample___fourth-render live-sample___full-render
 option:nth-of-type(odd) {
-  background: #fff;
+  background: white;
 }
 
 option:hover,
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md
index f8ef2b6e0705926..eb42e29ec88661c 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md
@@ -66,7 +66,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -99,11 +99,11 @@ This is the first example of code that explains [how to build a custom form widg
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -114,7 +114,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -133,8 +133,8 @@ This is the first example of code that explains [how to build a custom form widg
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -201,7 +201,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -234,11 +234,11 @@ This is the first example of code that explains [how to build a custom form widg
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -249,7 +249,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -268,8 +268,8 @@ This is the first example of code that explains [how to build a custom form widg
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -336,7 +336,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -369,11 +369,11 @@ This is the first example of code that explains [how to build a custom form widg
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -384,7 +384,7 @@ This is the first example of code that explains [how to build a custom form widg
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -403,8 +403,8 @@ This is the first example of code that explains [how to build a custom form widg
 }
 
 .select .highlight {
-  background: #000;
-  color: #fff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
index 230a00203551a1d..c5ccff8c89dc598 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
@@ -84,7 +84,7 @@ This is the second example that explain [how to build custom form widgets](/en-U
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -117,11 +117,11 @@ This is the second example that explain [how to build custom form widgets](/en-U
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -132,7 +132,7 @@ This is the second example that explain [how to build custom form widgets](/en-U
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -151,8 +151,8 @@ This is the second example that explain [how to build custom form widgets](/en-U
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
index b7eba42079485a6..28598fb3b7545d2 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
@@ -84,7 +84,7 @@ This is the third example that explain [how to build custom form widgets](/en-US
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -117,11 +117,11 @@ This is the third example that explain [how to build custom form widgets](/en-US
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -132,7 +132,7 @@ This is the third example that explain [how to build custom form widgets](/en-US
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -151,8 +151,8 @@ This is the third example that explain [how to build custom form widgets](/en-US
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
index b2cead7eb2ba228..2464c664206c7b3 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
@@ -84,7 +84,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -117,11 +117,11 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -132,7 +132,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -151,8 +151,8 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
index dd3f09b029c6381..4c2a2ee19c84e49 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
@@ -84,7 +84,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -117,11 +117,11 @@ This is the last example that explain [how to build custom form widgets](/en-US/
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -132,7 +132,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -151,8 +151,8 @@ This is the last example that explain [how to build custom form widgets](/en-US/
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
index 69411c1fee426c7..b078c1b751ab1a6 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
@@ -184,7 +184,7 @@ So now that we have the basic functionality in place, the fun can start. The fol
   padding: 0.1em 2.5em 0.2em 0.5em;
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-radius: 0.4em;
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 
@@ -219,11 +219,11 @@ We don't need an extra element to design the down arrow; instead, we're using th
   width: 2em;
   padding-top: 0.1em;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   text-align: center;
 }
 ```
@@ -253,7 +253,7 @@ Next, let's style the list of options:
   overflow-y: auto;
   overflow-x: hidden;
 
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -270,8 +270,8 @@ For the options, we need to add a `highlight` class to be able to identify the v
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -324,7 +324,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -357,11 +357,11 @@ So here's the result with our three states ([check out the source code here](/en
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -372,7 +372,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -391,8 +391,8 @@ So here's the result with our three states ([check out the source code here](/en
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -445,7 +445,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -478,11 +478,11 @@ So here's the result with our three states ([check out the source code here](/en
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -493,7 +493,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -512,8 +512,8 @@ So here's the result with our three states ([check out the source code here](/en
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -566,7 +566,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -599,11 +599,11 @@ So here's the result with our three states ([check out the source code here](/en
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -614,7 +614,7 @@ So here's the result with our three states ([check out the source code here](/en
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -633,8 +633,8 @@ So here's the result with our three states ([check out the source code here](/en
 }
 
 .select .highlight {
-  background: #000;
-  color: #fff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -825,7 +825,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -858,11 +858,11 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -873,7 +873,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -892,8 +892,8 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -1122,7 +1122,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -1155,11 +1155,11 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -1170,7 +1170,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -1189,8 +1189,8 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -1451,7 +1451,7 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -1484,11 +1484,11 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -1499,7 +1499,7 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -1518,8 +1518,8 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -1776,7 +1776,7 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
   padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
   width: 10em; /* 100px */
 
-  border: 0.2em solid #000; /* 2px */
+  border: 0.2em solid black; /* 2px */
   border-radius: 0.4em; /* 4px */
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
@@ -1809,11 +1809,11 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
 
   text-align: center;
 
-  border-left: 0.2em solid #000;
+  border-left: 0.2em solid black;
   border-radius: 0 0.1em 0.1em 0;
 
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
 }
 
 .select .optList {
@@ -1824,7 +1824,7 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
   padding: 0;
 
   background: #f0f0f0;
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
@@ -1843,8 +1843,8 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
 }
 
 .select .highlight {
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
 }
 ```
 
@@ -2040,7 +2040,7 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to
   overflow: hidden;
 }
 .styledSelect:not(:focus-within) input:checked + label {
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-radius: 0.4em;
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 }
@@ -2053,13 +2053,13 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to
   margin: 0 -4px 0 4px;
 }
 .styledSelect:focus-within {
-  border: 0.2em solid #000;
+  border: 0.2em solid black;
   border-radius: 0.4em;
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 }
 .styledSelect:focus-within input:checked + label {
   background-color: #333;
-  color: #fff;
+  color: white;
   width: 100%;
 }
 ```
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
index fa37b4331f0db0a..3ab50b846eec11f 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_structure_a_web_form/index.md
@@ -359,7 +359,7 @@ Let's put these ideas into practice and build a slightly more involved form —
 
    input:focus,
    textarea:focus {
-     border-color: #000;
+     border-color: black;
    }
 
    textarea {
diff --git a/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md b/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md
index 04639e56c5e95f3..d250812093cbe54 100644
--- a/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md
@@ -250,7 +250,7 @@ form {
   margin: 0 auto;
   padding: 1em;
   box-sizing: border-box;
-  background: #fff url("background.jpg");
+  background: white url("background.jpg");
 
   /* we create our grid */
   display: grid;
@@ -362,8 +362,8 @@ button::after {
 
 button:hover,
 button:focus {
-  background: #000;
-  color: #fff;
+  background: black;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/forms/your_first_form/index.md b/files/en-us/learn_web_development/extensions/forms/your_first_form/index.md
index f094c861ddbe11a..368530fa9538dcb 100644
--- a/files/en-us/learn_web_development/extensions/forms/your_first_form/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/your_first_form/index.md
@@ -229,7 +229,7 @@ textarea:focus {
   /* Set the outline width and style */
   outline-style: solid;
   /* To give a little highlight on active elements */
-  outline-color: #000;
+  outline-color: black;
 }
 
 textarea {
@@ -364,7 +364,7 @@ textarea {
 input:focus,
 textarea:focus {
   /* To give a little highlight on active elements */
-  border-color: #000;
+  border-color: black;
 }
 
 textarea {
diff --git a/files/en-us/learn_web_development/extensions/testing/html_and_css/index.md b/files/en-us/learn_web_development/extensions/testing/html_and_css/index.md
index 734b34b4dcc6479..5ea49b0357f64c8 100644
--- a/files/en-us/learn_web_development/extensions/testing/html_and_css/index.md
+++ b/files/en-us/learn_web_development/extensions/testing/html_and_css/index.md
@@ -169,8 +169,8 @@ The button has a number of declarations that style, but the two we are most inte
 button {
   /* … */
 
-  background-color: #ff0000;
-  background-color: rgb(255 0 0 / 100%);
+  background-color: red;
+  background-color: rgb(255 0 0 / 90%);
   box-shadow:
     inset 1px 1px 3px rgb(255 255 255 / 40%),
     inset -1px -1px 3px rgb(0 0 0 / 40%);
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md
index 0872081c5ddb298..ee903c466ad1e0a 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md
@@ -44,7 +44,7 @@ button {
   font-weight: bold;
   font-size: 140%;
   background-color: #db1f48;
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md
index 5b5cc49be06073e..dac45001c446df2 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md
@@ -32,7 +32,7 @@ In the example below we have given the parent container `display: flex`; then se
   background-color: rgb(69 164 181);
   border-radius: 5px;
   padding: 10px;
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
index 80b8d24be27c5df..4d17325bf76b290 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
@@ -84,7 +84,7 @@ Before we jump to some practical examples, let's step back a bit as there are tw
 
 Okay, let's have fun with backgrounds:
 
-```css-nolint
+```css
 .fancy {
   padding: 1em;
   width: 100%;
@@ -100,18 +100,19 @@ Okay, let's have fun with backgrounds:
      As you will notice, color gradients are
      considered to be images and can be
      manipulated as such */
-  background-image: linear-gradient(175deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgb(0 0 0 / 0%) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgb(0 0 0 / 0%) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgb(0 0 0 / 0%) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgb(0 0 0 / 0%) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgb(0 0 0 / 0%) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 80%, #74a6ae 80%);
+  background-image:
+    linear-gradient(175deg, transparent 95%, #8da389 95%),
+    linear-gradient(85deg, transparent 95%, #8da389 95%),
+    linear-gradient(175deg, transparent 90%, #b4b07f 90%),
+    linear-gradient(85deg, transparent 92%, #b4b07f 92%),
+    linear-gradient(175deg, transparent 85%, #c5a68e 85%),
+    linear-gradient(85deg, transparent 89%, #c5a68e 89%),
+    linear-gradient(175deg, transparent 80%, #ba9499 80%),
+    linear-gradient(85deg, transparent 86%, #ba9499 86%),
+    linear-gradient(175deg, transparent 75%, #9f8fa4 75%),
+    linear-gradient(85deg, transparent 83%, #9f8fa4 83%),
+    linear-gradient(175deg, transparent 70%, #74a6ae 70%),
+    linear-gradient(85deg, transparent 80%, #74a6ae 80%);
 }
 ```
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md
index 8c0c416cc8b401d..de5c588bc41fb96 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md
@@ -46,7 +46,7 @@ The {{cssxref("object-fit")}} property makes each of these approaches possible.
 }
 
 .box {
-  border: 5px solid #000;
+  border: 5px solid black;
 }
 
 .box img {
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md
index f5a64db6a5b3c28..475b3979a89811b 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md
@@ -46,7 +46,7 @@ body {
 
 .box {
   flex: 1;
-  border: 5px solid #000;
+  border: 5px solid black;
   border-radius: 0.5em;
   font-size: 140%;
   padding: 20px;
@@ -55,14 +55,14 @@ body {
 
 ```css live-sample___opacity
 .box1 {
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   opacity: 0.5;
 }
 
 .box2 {
   background-color: rgb(0 0 0 / 0.5);
-  color: #fff;
+  color: white;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md
index fff873222cad372..1e82493895e5940 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md
@@ -50,7 +50,7 @@ button {
 ```css live-sample___transition-button
 .fade {
   background-color: #db1f48;
-  color: #fff;
+  color: white;
   transition: background-color 1s;
 }
 
diff --git a/files/en-us/mdn/kitchensink/index.md b/files/en-us/mdn/kitchensink/index.md
index 1c0fcd6c20f4836..fd2f99052db2904 100644
--- a/files/en-us/mdn/kitchensink/index.md
+++ b/files/en-us/mdn/kitchensink/index.md
@@ -182,7 +182,7 @@ filter: drop-shadow(16px 16px 20px red) invert(75%);
 
 ```css interactive-example
 .example-container {
-  background-color: #fff;
+  background-color: white;
   width: 260px;
   height: 260px;
   display: flex;
diff --git a/files/en-us/mdn/writing_guidelines/code_style_guide/index.md b/files/en-us/mdn/writing_guidelines/code_style_guide/index.md
index ed1e3967305b9bd..555559bd988a962 100644
--- a/files/en-us/mdn/writing_guidelines/code_style_guide/index.md
+++ b/files/en-us/mdn/writing_guidelines/code_style_guide/index.md
@@ -112,39 +112,6 @@ These guidelines should be followed to ensure that the code examples you write d
 - **Set the width to 100%**: The main content pane on MDN Web Docs is about 700px wide on desktop, so the embedded code examples must look OK at that width.
 - **Set height below 700px**: We recommend keeping this height for the rendered code example width for maximum onscreen legibility.
 
-### Color in the rendered code example
-
-Use keywords for primary and other "basic" colors, for example:
-
-```css example-good
-color: black;
-color: white;
-color: red;
-```
-
-Use `rgb()` for more complex colors (including semi-transparent ones):
-
-```css example-good
-color: rgb(0 0 0 / 50%);
-color: rgb(248 242 230);
-```
-
-For hex colors, use the short form where relevant:
-
-```css example-good
-color: #058ed9;
-color: #a39a92c1;
-color: #ff0;
-color: #fbfa;
-```
-
-As opposed to:
-
-```css-nolint example-bad
-color: #ffff00;
-color: #ffbbffaa;
-```
-
 ### Highlight examples as good or bad
 
 You'll notice on this page that the code blocks that represent good practices to follow are rendered with a green check mark in the right corner, and the code blocks that demonstrate bad practices are rendered with a white cross in a red circle.
diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
index db7df630614a81d..7b3f8f6a4515f3b 100644
--- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
+++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/css_function_page_template/index.md
@@ -108,7 +108,7 @@ var(--custom-prop,)
 /* With a fallback value */
 /* var( <custom-property-name> , <declaration-value> ) */
 var(--custom-prop, initial)
-var(--custom-prop, #FF0000)
+var(--custom-prop, red)
 var(--my-background, linear-gradient(transparent, aqua), pink)
 var(--custom-prop, var(--default-value))
 var(--custom-prop, var(--default-value, red))
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md
index cbbe357d496cc70..41af2e397172032 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/theme/index.md
@@ -30,7 +30,7 @@ sidebar: addonsidebar
   },
   "colors": {
     "frame": "#CF723F",
-    "tab_background_text": "#000"
+    "tab_background_text": "black"
   }
 }</pre
         >
@@ -1381,7 +1381,7 @@ A basic theme must define an image to add to the header, the accent color to use
    },
    "colors": {
      "frame": "#CF723F",
-     "tab_background_text": "#000"
+     "tab_background_text": "black"
    }
  }
 ```
@@ -1398,7 +1398,7 @@ Multiple images can be used to fill the header. Before Firefox version 60, use a
    },
    "colors": {
      "frame": "blue",
-     "tab_background_text": "#ffffff"
+     "tab_background_text": "white"
    }
  }
 ```
@@ -1416,7 +1416,7 @@ You can also fill the header with a repeated image, or images, in this case a si
    },
    "colors": {
      "frame": "green",
-     "tab_background_text": "#000"
+     "tab_background_text": "black"
    }
  }
 ```
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
index 5017e02d77d843f..429f83ecd5e5620 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
@@ -405,7 +405,7 @@ button.panel-section-tabs-button {
 }
 
 .panel-list-item > .text-shortcut {
-  color: #808080;
+  color: gray;
   font-family: "Lucida Grande", caption;
   font-size: 0.847em;
   justify-content: flex-end;
@@ -436,7 +436,7 @@ button.panel-section-tabs-button {
 }
 
 .panel-section-footer-button > .text-shortcut {
-  color: #808080;
+  color: gray;
   font-family: "Lucida Grande", caption;
   font-size: 0.847em;
 }
@@ -452,7 +452,7 @@ button.panel-section-tabs-button {
 .panel-section-footer-button.default {
   background-color: #0996f8;
   box-shadow: 0 1px 0 #0670cc inset;
-  color: #fff;
+  color: white;
 }
 
 .panel-section-footer-button.default:hover {
diff --git a/files/en-us/related/imsc/basics/index.md b/files/en-us/related/imsc/basics/index.md
index 0140f172cb2063e..444c650a7efad1a 100644
--- a/files/en-us/related/imsc/basics/index.md
+++ b/files/en-us/related/imsc/basics/index.md
@@ -176,16 +176,16 @@ The more expanded example below gives you an idea what you can do with IMSC afte
       <style xml:id="alignStart" tts:textAlign="start"/>
       <style xml:id="alignCenter" tts:textAlign="center"/>
       <style xml:id="alignEnd" tts:textAlign="end"/>
-      <style xml:id="textWhite" tts:color="#FFFFFF"/>
+      <style xml:id="textWhite" tts:color="white"/>
       <style xml:id="titleHeading" tts:fontSize="300%"/>
-      <style xml:id="spanDefaultStyle" tts:backgroundColor="#000000" tts:color="#FFFFFF"/>
+      <style xml:id="spanDefaultStyle" tts:backgroundColor="black" tts:color="white"/>
       <style xml:id="monoFont" tts:fontFamily="Lucida Console, Monaco, monospace"/>
       <style xml:id="sansserifFont" tts:fontFamily="Impact, Charcoal, sans-serif"/>
       <style xml:id="comicFont" tts:fontFamily="Comic Sans MS, cursive, sans-serif"/>
-      <style xml:id="blueText" tts:color="#00FFFF" tts:backgroundColor="#000000"/>
-      <style xml:id="limeText" tts:color="#00FF00" tts:backgroundColor="#000000"/>
-      <style xml:id="fuchsiaText" tts:color="#FF00FF" tts:backgroundColor="#000000"/>
-      <style xml:id="yellowText" tts:color="#FFFF00" tts:backgroundColor="#000000"/>
+      <style xml:id="blueText" tts:color="cyan" tts:backgroundColor="black"/>
+      <style xml:id="limeText" tts:color="lime" tts:backgroundColor="black"/>
+      <style xml:id="fuchsiaText" tts:color="magenta" tts:backgroundColor="black"/>
+      <style xml:id="yellowText" tts:color="yellow" tts:backgroundColor="black"/>
     </styling>
     <layout>
       <region xml:id="rTop" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="before"/>
diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md
index 6adb7c35af74905..2258b5f36417221 100644
--- a/files/en-us/web/css/animation-timing-function/index.md
+++ b/files/en-us/web/css/animation-timing-function/index.md
@@ -578,6 +578,7 @@ The following image shows graphs of all the `step()` function values used in thi
 
 - [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
 - {{cssxref('easing-function')}}
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
 - JavaScript {{domxref("AnimationEvent")}} API
 - [Cubic bézier generation tool](https://cubic-bezier.com/)
 - Other related animation properties: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}
diff --git a/files/en-us/web/css/css_easing_functions/index.md b/files/en-us/web/css/css_easing_functions/index.md
new file mode 100644
index 000000000000000..e3275444334547e
--- /dev/null
+++ b/files/en-us/web/css/css_easing_functions/index.md
@@ -0,0 +1,57 @@
+---
+title: CSS easing functions
+slug: Web/CSS/CSS_easing_functions
+page-type: css-module
+spec-urls: https://drafts.csswg.org/css-easing-2
+sidebar: cssref
+---
+
+The **CSS easing functions** module defines easing functions, which provide a means to control the transformation of values. The functions defined include linear, cubic bezier, and step easing functions. These easing functions can be applied to animations and transitions.
+
+Gradually increasing the speed at which an element moves can give the element a sense of weight as it appears to gather momentum. Easing functions enable you to control the rate of change. Cubic bezier easing functions can be used to produce intuitive user interface elements or convincing cartoon props that behave like their physical counterparts.
+
+Alternatively, you may want an animation to move forward in distinct steps, to create robot-like movement, or the effect of a segmented wheel that rotates such that the segments always appear in the same position. For this, step easing functions can be used.
+
+## Reference
+
+### Functions
+
+- {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}}
+- {{cssxref("easing-function/linear", "linear()")}}
+- {{cssxref("easing-function/steps", "steps()")}}
+
+### data types
+
+- {{cssxref("easing-function")}}
+- [`<linear-easing-function>`](/en-US/docs/Web/CSS/easing-function#linear-easing-function)
+- [`<cubic-bezier-easing-function>`](/en-US/docs/Web/CSS/easing-function#cubic-bezier-easing-function)
+- [`<step-easing-function>`](/en-US/docs/Web/CSS/easing-function#step-easing-function)
+
+### Terms and glossary definitions
+
+- {{glossary("Bézier curve")}}
+- {{glossary("Interpolation")}}
+
+## Guides
+
+- [CSS value functions: easing functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#easing_functions)
+  - : The CSS statements that invoke special data processing or calculations to return a CSS value for a CSS property.
+
+## Related concepts
+
+- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module
+  - {{cssxref("animation-timing-function")}}
+  - {{cssxref("animation")}} shorthand
+
+- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module
+  - {{cssxref("transition-timing-function")}}
+  - {{cssxref("transition")}} shorthand
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- [CSS value functions](/en-US/docs/Web/CSS/CSS_values_and_units/CSS_value_functions)
+- {{cssxref("will-change")}} CSS property
diff --git a/files/en-us/web/css/easing-function/cubic-bezier/index.md b/files/en-us/web/css/easing-function/cubic-bezier/index.md
index c1530da90524b18..583b20aff88835c 100644
--- a/files/en-us/web/css/easing-function/cubic-bezier/index.md
+++ b/files/en-us/web/css/easing-function/cubic-bezier/index.md
@@ -141,4 +141,5 @@ cubic-bezier(-1.9, 0.3, -0.2, 2.1)
 ## See also
 
 - Other easing functions: {{cssxref("easing-function/linear", "linear()")}} and {{cssxref("easing-function/steps", "steps()")}}
-- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011)
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
+- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou
diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md
index b35126ed20cd98e..78694aa097b689b 100644
--- a/files/en-us/web/css/easing-function/index.md
+++ b/files/en-us/web/css/easing-function/index.md
@@ -216,7 +216,8 @@ selectElem.addEventListener("change", () => {
 
 ## See also
 
-- [CSS animations](/en-US/docs/Web/CSS/CSS_animations)
-- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)
-- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011)
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
+- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module
+- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module
 - [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald
+- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou
diff --git a/files/en-us/web/css/easing-function/linear/index.md b/files/en-us/web/css/easing-function/linear/index.md
index 1c97ded77be70b0..83eb01003bb5b54 100644
--- a/files/en-us/web/css/easing-function/linear/index.md
+++ b/files/en-us/web/css/easing-function/linear/index.md
@@ -93,4 +93,5 @@ linear(start, middle, end)
 ## See also
 
 - Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/steps", "steps()")}}
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
 - [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald
diff --git a/files/en-us/web/css/easing-function/steps/index.md b/files/en-us/web/css/easing-function/steps/index.md
index 9109129a02a0561..e173d012e509352 100644
--- a/files/en-us/web/css/easing-function/steps/index.md
+++ b/files/en-us/web/css/easing-function/steps/index.md
@@ -107,4 +107,5 @@ steps(0, jump-none)
 ## See also
 
 - Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/linear", "linear()")}}
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
 - [Step function](https://en.wikipedia.org/wiki/Step_function) on Wikipedia
diff --git a/files/en-us/web/css/transition-timing-function/index.md b/files/en-us/web/css/transition-timing-function/index.md
index 93f9ddc64b94551..40f871a3d15d823 100644
--- a/files/en-us/web/css/transition-timing-function/index.md
+++ b/files/en-us/web/css/transition-timing-function/index.md
@@ -299,6 +299,7 @@ const intervalID = setInterval(updateTransition, 10000);
 
 - [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
 - [`<easing-function>`](/en-US/docs/Web/CSS/easing-function)
+- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
 - {{cssxref('transition')}}
 - {{cssxref('transition-property')}}
 - {{cssxref('transition-duration')}}
diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md
index 0b510e637bb995f..2e4cc0b736eb931 100644
--- a/files/en-us/web/html/reference/elements/input/color/index.md
+++ b/files/en-us/web/html/reference/elements/input/color/index.md
@@ -127,7 +127,7 @@ First, there's some setup. Here we establish some variables, setting up a variab
 
 ```js
 let colorPicker;
-const defaultColor = "blue";
+const defaultColor = "#0000ff";
 
 window.addEventListener("load", startup, false);
 ```