ES6 colorpicker


0.0.133 years ago4 years agoMinified + gzip package size for @baianat/colorpicker in KB



ES6 color picker extension for Base framework.

Getting Started


You can install colorpicker as part of base.extensions.

npm install @baianat/base.extensions

# or using yarn
yarn add @baianat/base.extensions

If you want the standalone version.

npm install @baianat/colorpicker

yarn add @baianat/colorpicker

Include necessary files

  <link rel="stylesheet" href="dist/css/colorpikcer.css">
    <script type="text/javascript" src="dist/js/colorpikcer.js"></script>

HTML Layout

You need an input element to track the color value.

<input id="myPicker">

  const picker = new Colorpicker('#myPicker', {
    // default starter color
    defaultColor = '#ffffff',
    // color wheel radius in px
    radius = 200,
    // output color mode 'rgb', 'hex' or 'hsl'
    mode = 'rgb',
    // array of colors to fill recent colors, max of 6 colors
    recentColors = ['#c1c1c1', '#000000', '#ffffff'],
    // events to fire
    events = {
      // fires before selecting a color
      beforeSelect() {},
      // fires after selecting a color
      afterSelect() {},
      // fires before opening color picker menu
      beforeOpen() {},
      // fires after opening color picker menu
      afterOpen() {},
      // fires before clicking submit button
      beforeSubmit() {},
      // fires after clicking submit button
      afterSubmit() {},
      // fires on clicking on any part of the picker menu
      clicked() {}

  // to track color changes
  picker.el.addEventListener('change', () => {
    // do something great!


You can call method on Colorpicker instance

const newPicker = new Picker('#myPicker');
Method Argument Description
selectColor [String] color, [Bool] mute you can change the selected with color argument. If you want to stop the picker from dispatching events, you can set mute to true. It's false by default.
getColorFromSliders It returns the rgb sliders values as string e.g. "rgb(71, 182, 148)"
getColorFromWheel [Object] mouse It accepts an object, holds the x and y location on the wheel {x: 100, y: 100}, then returns its rgb value
togglePicker show/hide picker menu
closePicker hide picker menu
openPicker show picker menu



Copyright (c) 2017 Baianat

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.