feat(tools): add CSS color mixer tool

Author: OnkarRuikar

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

@@ -0,0 +1,17 @@
+---
+title: Color mixer tool
+slug: Web/CSS/color_value/color-mix/color-mixer-tool
+page-type: guide
+sidebar: cssref
+---
+
+This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu.
+
+{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}}
+
+## See also
+
+- {{CSSXref("<color>")}}
+- {{CSSXref("<color-interpolation-method>")}}
+- {{cssxref("<hue>")}}
+- [CSS relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)

files/sidebars/cssref.yaml

@@ -31,7 +31,7 @@ sidebar:
       - /Learn_web_development/Core/Styling_basics/Debugging_CSS
       - /Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension
       - /Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper
-      - /Learn_web_development/Core/Styling_basics/Cool-looking_box
+      - /Learn_web_development/Core/Styling_basics
   - link: /Learn_web_development/Core/Text_styling
     title: CSS_text_styling
     details: closed
@@ -354,6 +354,7 @@ sidebar:
       - /Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
       - /Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator
       - /Web/CSS/CSS_shapes/Shape_generator
+      - /Web/CSS/color_value/color-mix/color-mixer-tool
 l10n:
   de:
     Beginners: Einsteiger-Tutorials