mui
Add a Color Picker component
Summary
It would be a very straightforward component (UX-wise), allowing the user to either select from a list of predefined colors, or select (or we should say "compose") a color in one of the common color formats (RGB, RGBA, HSL, HSV, HEX, etc.). The idea for this suggestion came to me while browsing the official M3 docs, where in one of the illustrations regarding Colors, a Color Picker is shown: https://m3.material.io/styles/color/system/how-the-system-works#d7e1bd66-e758-405f-9814-51e5d2f02c6b This led me to researching whether there's anything like that available for Material UI and finding that there isn't any official Color Picker component (not even suggested at the time I'm writing this).
Examples
- material-ui-color-picker: https://www.npmjs.com/package/material-ui-color-picker
- mui-color: https://github.com/mikbry/mui-color
- react-colorful: https://www.npmjs.com/package/react-colorful
- react-color: https://www.npmjs.com/package/react-color This package provides the widest variety of pickers.
- react-native-rectangle-color-picker: https://github.com/flyskywhy/react-native-rectangle-color-picker Shape customization of pickers' color palette comes to mind when looking at this.
- react-color-palette: https://www.npmjs.com/package/react-color-palette
- react-linear-gradient-picker: https://www.npmjs.com/package/react-linear-gradient-picker
There are many more, but you get the idea.
Motivation
There is no easy (UX-way) out-of-the-box solution to allow the user to pick a custom color. Such a picker could go very well with the new M3 color system and the customization options it brings to the table compared to M2. Given how many picker variants there are (see react-color, linked above), there is potential for Pro/Premium content regarding these pickers.
Search keywords: color colour picker new component rgb rgba hsv hsl hex
