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 fix(navigation): add shape generator and color mixer tools to the 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

(comment last updated: 2025-09-02 02:43:14)

[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.