0.0.0

MC Picker

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.

For example

here are some color inputs
and here are some with labels

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.