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

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' },
    add    : { icon: '+', title: 'Add to Swatches' },
    format : { icon: '⇆', title: 'Switch Color Format' }
  },

  // 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)

Helper methods exported alongside the default ColorPicker

Methods (ColorPicker instance)