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.
For example
Installation#
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>
.
Datalist#
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.
Alpha channel#
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.
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.
Customisation#
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
.