a minimal color picker
Just add the script and the colorpicker will work on any input[type=color]. Even if you add them to DOM afterwards.
The implementation is minimal, the code is minimal, even the colorpicker itself is a mere six elements in a wrapper and some smart CSS.
Checkout https://sjeiti.github.io/clr/ for live examples.
To install do npm i -S mc_picker or yarn add mc_picker -S and import it somewhere: import 'mc_picker'.
Or load into HTML directly from CDN with <script src="https://unpkg.com/mc_picker"></script>.
The input[type=color] can have a related dataList. These are shown as swatch options at the top of the color picker. The options are not validated against so the regular interface is still functional.
Although input[type=color] does not support alpha channels, you can add this by setting [data-alpha=255]. The value ranges from 0 to 255 and updates when changed.
The input value itself is still the regular rgb format so you'll have to concat it from the data-attribute yourself, or use the API.
When activated, each input element exposes a color object: document.querySelector('input').color. All instances are also exposed on globalThis.pickers; a map with the HTMLInputElement as key.
You can easily adjust dimensions through CSS without affecting functionality:
.mcpicker {
--mcp-w: 20rem;
--mcp-h: 20rem;
--mcp-gutter: 2rem;
--mcp-font-size: 1.2rem;
}
This can also be done for a single instance when you use .mcpicker_[color input id] instead of .mcpicker.
This project is licensed under the MIT License - see the LICENSE file for details