feat(tools): add CSS color mixer tool

.prettierignore

@@ -4,6 +4,8 @@
 build/
 /files/en-us/_githistory.json
 /tests/front-matter_test_files
+/files/en-us/web/css/css_colors/color_mixer/classic.min.css
+/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js
 
 # XXX Ignored until https://github.com/prettier/prettier/issues/15032 is fixed
 /files/en-us/web/javascript/reference/operators/exponentiation/index.md

.vscode/cspell.json

@@ -28,7 +28,9 @@
   "ignorePaths": [
     ".vscode/cspell.json",
     ".vscode/extensions.json",
-    ".markdownlint-cli2.jsonc"
+    ".markdownlint-cli2.jsonc",
+    "/files/en-us/web/css/css_colors/color_mixer/classic.min.css",
+    "/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js"
   ],
   "ignoreRegExpList": [
     // macros

files/en-us/_redirects.txt

@@ -12250,6 +12250,7 @@
 /en-US/docs/Web/CSS/CSS_cascade/specified_value	/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified_value
 /en-US/docs/Web/CSS/CSS_cascade/used_value	/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value
 /en-US/docs/Web/CSS/CSS_charsets	/en-US/docs/Web/CSS/CSS_syntax
+/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool	/en-US/docs/Web/CSS/CSS_colors/Color_picker
 /en-US/docs/Web/CSS/CSS_container_queries	/en-US/docs/Web/CSS/CSS_containment/Container_queries
 /en-US/docs/Web/CSS/CSS_descriptor_definition	/en-US/docs/Web/CSS
 /en-US/docs/Web/CSS/CSS_display/flow_layout/Block_and_inline_layout_in_normal_flow	/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
@@ -12328,7 +12329,7 @@
 /en-US/docs/Web/CSS/Tools/Border-image_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
 /en-US/docs/Web/CSS/Tools/Border-radius_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator
 /en-US/docs/Web/CSS/Tools/Box-shadow_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
-/en-US/docs/Web/CSS/Tools/ColorPicker_Tool	/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool
+/en-US/docs/Web/CSS/Tools/ColorPicker_Tool	/en-US/docs/Web/CSS/CSS_colors/Color_picker
 /en-US/docs/Web/CSS/Understanding_CSS_z-index	/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Adding_z-index	/en-US/docs/Web/CSS/CSS_positioned_layout/Using_z-index
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_and_float	/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_floating_elements

files/en-us/_wikihistory.json

@@ -75914,7 +75914,7 @@
       "chrisdavidmills"
     ]
   },
-  "Web/CSS/CSS_colors/Color_picker_tool": {
+  "Web/CSS/CSS_colors/Color_picker": {
     "modified": "2020-10-30T22:49:32.596Z",
     "contributors": [
       "td2014",

files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md

@@ -61,7 +61,7 @@ At this point, it's good to start putting together the content that will eventua
 
 Let's choose a background color for your page.
 
-1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) and find a color you like.
+1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker) and find a color you like.
 2. When you click on a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now.
 
 ![Color-Picker-Tool on MDN Docs website with RGB, HSL, and HEX colors ](color-picker.png)

files/en-us/web/css/color_value/color/index.md

@@ -383,7 +383,7 @@ The output is as follows:
 - {{CSSXref("color")}} property
 - [The `<color>` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
-- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool)
+- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) media feature
 - [Wide Gamut Color in CSS with Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)

files/en-us/web/css/color_value/hsl/index.md

@@ -406,7 +406,7 @@ div.legacyHSLA {
 - [`lch()`](/en-US/docs/Web/CSS/color_value/lch) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color functions
 - [Hue interpolation in `color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix#using_hue_interpolation_in_color-mix)
 - [List of all color notations](/en-US/docs/Web/CSS/color_value)
-- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool)
+- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - [Color picker tool](https://apps.colorjs.io/picker/) by Lea Verou

files/en-us/web/css/color_value/hwb/index.md

@@ -275,7 +275,7 @@ The output is as follows:
 ## See also
 
 - {{CSSXref("<color>")}}: For a list of all color notations
-- [Color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool)
+- [Color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - {{CSSXref("<hue>")}}: the data type representing a hue angle of a color

files/en-us/web/css/color_value/rgb/index.md

@@ -343,6 +343,6 @@ div.comma-separated {
 ## See also
 
 - The {{CSSXref("<color>")}} data type for a list of all color notations
-- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool)
+- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module