feat(tools): add CSS color mixer tool

[OnkarRuikar]

Description

Add the existing tool to the tools infrastructure: left sidebar and navbar

Motivation

The tool is similar to the other listed CSS tools: https://github.com/mdn/css-examples/tree/main/tools. Hosted in the same place. We need to list it along with other tools.

Related issues and pull requests

• Navbar inclusion is covered in chore(menu): add Shape generator + Color mixer to Tools menu fred#670

[github-actions]

Preview URLs (9 pages)

• /en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like
• /en-US/docs/Web/CSS/CSS_colors/Color_mixer
• /en-US/docs/Web/CSS/CSS_colors/Color_picker
• /en-US/docs/Web/CSS/CSS_colors/Color_values
• /en-US/docs/Web/CSS/CSS_colors
• /en-US/docs/Web/CSS/color_value/color
• /en-US/docs/Web/CSS/color_value/hsl
• /en-US/docs/Web/CSS/color_value/hwb
• /en-US/docs/Web/CSS/color_value/rgb

Flaws (8)

Note! 5 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/color_value/rgb
Title: rgb()
Flaw count: 2

• macros:
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension which is a redirect
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper which is a redirect

---

URL: /en-US/docs/Web/CSS/CSS_colors
Title: CSS colors
Flaw count: 2

• macros:
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension which is a redirect
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper which is a redirect

---

URL: /en-US/docs/Web/CSS/CSS_colors/Color_picker
Title: Color picker
Flaw count: 2

• macros:
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension which is a redirect
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper which is a redirect

---

URL: /en-US/docs/Web/CSS/CSS_colors/Color_values
Title: CSS color values
Flaw count: 2

• macros:
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension which is a redirect
  • Macro produces link /en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper which is a redirect

(comment last updated: 2025-09-16 02:30:01)

[OnkarRuikar]

All good points! I've addressed them. Two issues to address:

1. Should we call it Color mixer tool like the existing Color picker tool or call it Color mixer like Shape generator? Should we remove 'tool' word from Color picker tool as well?
2. @LeoMcA and @bsmth The pickr.es5.min.js works in local dev with Fred. Will it work on live Fred server, or should I host the file in shared assets repo? At the moment it is not working in PR preview.

[estelle]

1. Should we call it `Color mixer tool` like the existing `Color picker tool` or call it `Color mixer` like `Shape generator`? Should we remove 'tool' word from `Color picker tool` as well?

1. Let's remove the "tool" in "color picker tool".
2. Should we put the tools in alphabetical order in the left nav?
3. The color mixer should output the color in a few formats: the color-mix(in <color-space>, <color> <percent>, <colot> <percent>) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

[OnkarRuikar]

Let's remove the "tool" in "color picker tool".

Done. Also updated slug and content references.

Should we put the tools in alphabetical order in the left nav?

Done. Also prposed updates in top navigation

The color mixer should output the color in a few formats: the color-mix(in , , ) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

This would require a third party library like Color.js and Chroma.js. Let's get the tool in first and then do enhancements in followup PRs.

[estelle]

The color mixer should output the color in a few formats: the color-mix(in , , ) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

This would require a third party library like Color.js and Chroma.js. Let's get the tool in first and then do enhancements in followup PRs.

I hand wrote the code for the color picker. In other words, it isn't too complex ;)
see https://github.com/mdn/css-examples/blob/main/modules/colors.html
Most color formats are srgb, so most are covered by that code.

Edit: I guess the issue is, as a tool, what is the output that people can use in their code? It's cool to see what the color value creates, but it's an "example" rather than a "tool" if there's nothing they can grab to use elsewhere.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[OnkarRuikar]

Edit: I guess the issue is, as a tool, what is the output that people can use in their code? It's cool to see what the color value creates, but it's an "example" rather than a "tool" if there's nothing they can grab to use elsewhere.

@estelle I see. Now the the output is shown in various color spaces and it is easily grabbable ✊

[estelle]

This is looking really good.

I suggested some edits.

[estelle]

Yay! 🎉