Add a Color Picker component #12059
Labels
docs
Improvements or additions to the documentation
enhancement
This is not a bug, nor a new feature
RFC
Request For Comments
waiting for 👍
Waiting for upvotes
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
The example from the MD3 documentation
![MD3_Color_Picker](https://private-user-images.githubusercontent.com/63308694/332447735-80056cb5-1983-452d-9eb2-7533303658d9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNDYxMDYsIm5iZiI6MTcyMTI0NTgwNiwicGF0aCI6Ii82MzMwODY5NC8zMzI0NDc3MzUtODAwNTZjYjUtMTk4My00NTJkLTllYjItNzUzMzMwMzY1OGQ5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDE5NTAwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRlYTgxODkwMjAwMTNlYzU4MjQzYWVjMjAxZDg0NjhiNThhZmVjNTY0ODFmNWM2NWI0MjZkYTE1NTgyZThmMGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.SFbSvane_YwfAtlJhlffXAaJ9Ac4pf6zqucKU_ZQ6u0)
Libraries implementing React color pickers:
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
The text was updated successfully, but these errors were encountered: