atul-mourya / color-picker

Minimal javascript color picker component

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' },
    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

Name	Parameters	Info
any_to_hex	String	Converts any color string to hex format
hex_rgba	String	Converts Hex to RGBA format
rgba_hsla	String	Converts RGBA to HSLA format
CSStoHSLA	String	Converts CSS-string HSLA to an HSLA javascript Object
HSLAtoCSS	String	Converts HSLA Object to CSS-string
changeColorFormat	color string, format string	Converts any color string to another color format string

Methods (ColorPicker instance)

Name	Parameters	Info
setColor	String	Sets the instance color
getColorFormat	String	Gets the format of a color string: hex, rgba or hsla