Package Exports

@thednp/color-picker
@thednp/color-picker/dist/js/color-picker.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@thednp/color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ColorPicker

The feature rich ColorPicker component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of TinyColor called simply Color.

ColorPicker can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out this codepen I've setup for you. Have fun!

Highlights

Accessibility Focus for WAI-ARIA compliance
ES6+ sources with TypeScript definitions
Framework agnostic and flexible design
Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
Supports keyboard and touch events
Automatic repositioning of the popup dropdown on show / window scroll
SCSS sources with minimal style required
Right To Left Languages Supported
light footprint, 10kb in size when minified and gZipped

Wiki

For an in depth guide on all things ColorPicker, check out the wiki pages:

Home - the ColorPicker wiki home.
NPM - quick installation guide.
CDN Link - quick implementation guide.
Usage - an in-depth browser usage.
ES6+ - your usual quick ES6+ guide.
Node.js - is this a thing?

Note - the wiki pages are still under construction.

NPM

You can install ColorPicker through NPM:

$ npm install @thednp/color-picker

Browser Usage

Download the latest package. unpack and inspect the contents. You need to copy the color-picker.js and color-picker.css or their minified variations to your app assets folders as follows. Link the required CSS in your document <head> tag

<link href="../assets/css/color-picker.css" rel="stylesheet">

Link the required JS in your document <body> tag, though it should work in the <head> as well

<script src="../assets/js/color-picker.js"></script>

OR use the ColorPickerElement custom element:

<script src="../assets/js/color-picker-element.js"></script>

OR use the ColorPickerElement custom element ESM module:

<script type="module" src="../assets/js/color-picker-element-esm.js"></script>

If you don't want to use the custom element, you can initialize the function for your elements at the end of your <body> tag

<script>
var myPicker = new ColorPicker('input.SELECTOR');
</script>

To use the DATA-API, you can provide for instance the data-format="hex", and other specific attributes like so:

<label for="myPicker">Color Label</label>
<div class="color-picker">
  <input id="myPicker" name="myPicker" data-function="color-picker" data-format="hex" data-color-presets="red,green,blue" class="color-preview" value="#069">
</div>

The data-function="color-picker" attribute is useful for mass initialization, check this usage section of the wiki.

Alternatively you can use the ColorPickerElement custom element, the data-function="color-picker" attribute is no longer required:

<label for="myPicker">Colour Field Label</label>
<color-picker data-format="rgb" data-color-keywords="#069:default,#111:revert">
  <input id="myPicker" name="myPicker" class="color-preview" value="#069">
</color-picker>

<script type="module" src="../path-to/color-picker-element-esm.js"></script>

As shown in the above example, all DATA API attributes for instance configuration are to be used on your custom element.

Initialize INPUT

import ColorPicker from '@thednp/color-picker';

let myPicker = new ColorPicker('#myPicker');

Initialize Custom Element

import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';

// initialize the CustomElement
const myPicker = new ColorPickerElement();
// set DATA API
myPicker.setAttribute('data-format', 'hsl');
myPicker.setAttribute('data-id', 'ADD_YOUR_UNIQUE_ID');
myPicker.setAttribute('data-value', 'rgb(150 0 150 / 0.8)');
myPicker.setAttribute('data-label', 'Color Picker Element Label');
myPicker.setAttribute('data-color-keywords', 'false');

// append, connectedCallback() is triggered
document.body.append(myPicker);

Other configuration options apply, see the API Guide.

Thanks

Dimitris Grammatikogiannis for his initial project as well as testing and contributions
Serhii Kulykov for his Vanilla Colorful
Brian Grinstead for his TinyColor
Jonathan Neal for his convert-colors
Peter Dematté for his colorPicker
Ștefan Petre at eyecon for his colorPicker
Brian Teeman for his patience

License

ColorPicker is released under the MIT License.