Package Exports

@yaireo/color-picker

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 (@yaireo/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

Minimal, 5KB Color-Picker in Vanila-js

⚠️ Supported only in modern browsers

Carefully crafted as lightweight as possible
Mousewheel-suppored range silders
Minimal UX for smallest screen footprint
Supported color formats: x11 color codes, hexa, rgba, hsla
Positioning-engine not included. Use your own, or one suggested below
Optional color swatches:
- pre-determined values (un-removable)
- custom color add/remove swatch
- optional global sync with localstorage between picker instances

tl;dr

This color-picker component is basesd on my previous work with highly customizable range input (slider) component: UI-Range and the power of HSLA color format infused into custom CSS properties (variables) to allow as lightweight solution as possible.

I have hand-crafted the color transformation functions to be as lightweight as possible, and kept the UI to the minimum necessary to provide the user with a better, unified, color-picking experience which I believe is better than the default <input type=color> which looks different across browsers and OS, and does not alow modifications to a color's alpha (opacity) channel.

Since this component is only the color picker itself, it is up to developers to connect it to a position script, if they wish to use it as a popup when some other thing is clicked on the page. An example of such can be seen in the demo page and below, on the last section.

Install

npm i @yaireo/color-picker

Use

const cPicker = new ColorPicker({
  // accepted formats: HEX(A), RGB(A), HSL(A), X11 color name
  color: 'red',

  // default rendered textual represention format
  // default: 'hex'
  defaultFormat: 'hex',

  // initial class name for the component's wrapper element
  // default: ''
  className: 'hidden',

  // to disable, set "false" instead of an Array
  // default: []
  swatches: ['red', '#666', 'rgba(10,20,30,.5)'],

  // saves colors for persistance and cross-usage between picker instances
  // default: false
  swatchesLocalStorage: true,

  // buttons text & icon
  buttons: {
    undo: {
      icon: '↶',
      title: 'Undo'
    },
    format: {
      icon: '⇆',
      title: 'Switch Color Format'
    },
    add: {
      icon: '+',
      title: 'Add to Swatches'
    }
  },

  // fired rapidly, on every range slider movement or any color change
  onInput(color){},

  // like "onInput", but not fired while a range slider is moved
  onChnage(color){},

  // helpful when the component is used as a popup
  onClickOutside(e){}
})

Example

In the below example the color picker is used as a popup. Since this component was designed as bare-minimum, it has no internal positioning-system and can be pluged with one, for example, the excellent, lightweight nanopop.

In the below example, the color-picker is being bound to an input element, so when the color-picker is being changes, so will the other input.

<script src="https://unpkg.com/nanopop"></script>
<input class='myColor' value='gold' style='--color:gold' />

const resizeObserver = new ResizeObserver(entries => {
  // only re-position the color picker if its not hidden
  if( !cPicker.DOM.scope.classList.contains('hidden') )
    NanoPop.reposition( myColor, cPicker.DOM.scope )
})

const cPicker = new ColorPicker({
  color: myColor.value, // use the input element's value

  className: 'hidden', // start as hidden

  swatches: ['white', '#000', 'rgba(255,0,0,.3)'],

  onClickOutside(e){
    let action = 'add'

    // if clicked on the input element, toggle picker's visibility
    if( e.target == myColor ){
      NanoPop.reposition( myColor, cPicker.DOM.scope )
      action = 'toggle'
    }

    // if "escape" key was pressed, add the "hidden" class
    if( e.key == 'Escape' )
      action = 'add'

    cPicker.DOM.scope.classList[action]('hidden')
  },

  onInput(color){
    myColor.value = color;
    myColor.style.setProperty('--color', color)
  },
})

// add the color picker to the DOM
document.body.appendChild(cPicker.DOM.scope)

// position the color picker next to the input element
NanoPop.reposition( myColor, cPicker.DOM.scope )

// re-position on window resize
resizeObserver.observe(document.body)