Powerful Color Picker

Beautiful UI, Easy to install

Get It For Free

Live Demo

Alice's Adventures in Wonderland

Chapter One – Down the Rabbit Hole

Alice, a girl of seven years, is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking, clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls a long way to a curious hall with many locked doors of all sizes

Features

  • Customizable CSS-based UI
  • Lightweight, at around 30KB minified (or ~7KB minified + gzipped)
  • Convert colors between HEX, RGB(A), HSL(A) and Named Colors
  • Zero dependencies (not even jQuery)
  • Supports IE11+, Safari, Google Chrome, Yandex Browser, Opera, Firefox

Documentation

Installation

Before you start using ColorPicker, you need to connect it to the page. The first thing to do is connect the styles, then the script, select the desired stript and style from the dist/css folder and the script from the dist/js folder then plug the style into the <head> tag and the script at the end of the document before the </body>, for example:

<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="dist/css/default-picker/light.min.css">
  </head>
  <!-- ... -->
  <body>
    <!-- ... -->
    <script src="dist/js/default-picker.min.js"></script>
  </body>
</html>

Getting Started

To set up a color picker, we need to make a HTML element with a unique identifier (an id attribute works well!) to act as a container:

<input id="colorpicker" type="text" class="form-control">

Now all we need to do is create a new instance of ColorPicker.Default, and tell it to use the container element we just made by providing a matching CSS selector:

var colorPicker = new ColorPicker.Default('#colorpicker');

Of course you might want to customise some things, just provide a list of options when creating a new color picker:

var colorPicker = new ColorPicker.Default("#colorpicker", {
  // Set the initial color to red
  color: "#f00"
});

For a full list of options, check out the options guide below.

Color Picker Options

As mentioned in the Getting Started section, when creating a new color picker you can customise it by providing a list of options:

var colorPicker = new ColorPicker.Default("#color-picker", {
  color: '',
  inline: false,
  placement: 'bottom',
  format: 'rgba',
  customClass: '',
  size: 'default',
  arrow: true,
  anchor: {
      hidden: false,
      cssProperty: 'color' // background-color, color, border-color
  },
  animation: 'slide-in',
  hideInfo: false,
  history: {
      hidden: false,
      colors: [] // ['red', 'green', 'rgba(255, 1, 128, 1)']
  },
  palette: [ // palette picker
      { // first row
          descendants: [ // row colors
              {
                  color: '#000000'
              },
              {
                  color: '#454545'
              },
              {
                  color: '#666666'
              },
              {
                  color: '#989898'
              },
              {
                  color: '#B6B6B6'
              },
              {
                  color: '#CBCBCB'
              },
              {
                  color: '#D8D8D8'
              },
              {
                  color: '#EEEEEF'
              },
              {
                  color: '#F3F3F3'
              },
              {
                  color: '#ffffff'
              }
          ]
      }
  ],
  palette: [ // tab palette picker
      { // tab and rows
          color: '#e6315b', // tab color
          descendants: [ //rows
              {
                  descendants: [
                      { color: '#ffd8e1' },
                      { color: '#fcc4d1' },
                      { color: '#f7a7ba' },
                      { color: '#f287a0' },
                      { color: '#ee6988' },
                      { color: '#e9486e' },
                      { color: '#e5315b' }
                  ]
              },
              {
                  descendants: [
                      { color: '#e6325c' },
                      { color: '#dd3058' },
                      { color: '#d52e55' },
                      { color: '#c82b50' },
                      { color: '#bc284b' },
                      { color: '#b22648' },
                      { color: '#a92444' }
                  ]
              },
              {
                  descendants: [
                      { color: '#a92444' },
                      { color: '#a02241' },
                      { color: '#95203c' },
                      { color: '#891d37' },
                      { color: '#7d1b32' },
                      { color: '#71182d' },
                      { color: '#661629' }
                  ]
              }
          ]
      }
  ]
});

Usage

ColorPicker can be initialized on the Input element and on any block element, you can create your custom elements, these elements are called anchor. The initialization on the input element was discussed above.

Initialization inside the input element:

<span class="colorpicker-input colorpicker-input--position-right">
  <input id="colorpicker" type="text" class="form-control">
  <span id="colorpicker-anchor" class="colorpicker-custom-anchor colorpicker-circle-anchor">
    <span class="colorpicker-circle-anchor__color" data-color></span>
  </span>
</span>

Initializing to a custom element:

<div id="colorpicker" class="colorpicker-custom-anchor colorpicker-circle-anchor">
  <div class="colorpicker-circle-anchor__color" data-color></div>
</div>

Available Options

Name Description Default
format hex,rgb,rgba,hsl,hsla 'rgba'
inline Inline mode false
placement top, right, bottom, left, top-center, right-center, bottom-center, left-center 'bottom'
color hex,rgb,rgba,hsl,hsla,named colors ''
arrow Show or hide arrow true
customClass Add custom css class to a picker ''
size default,medium,small 'default'
shade 100,200,300,400,500,600,700,800,900 - shades for material color picker 500
anchor.hidden Show or hide anchor element false
anchor.cssProperty color,background-color,border-color 'color'
animation Picker animation 'slide-in'
hideAfterColorChange Hide picker if color was changed true
hideInfo Hide information block with inputs false
history.hidden Show or hide history block: true, false false
history.colors List of history colors: ['red', 'green', 'blue] []
hexOnly Hex only mode false

Events

change - An event occurs when a new color was selected

colorPicker.on('change', function(color) {
    console.log(color.hex); // #fe0000
    console.log(color.rgb); // rgb(254, 0, 0)
    console.log(color.rgba); // rgba(254, 0, 0, 1)
    console.log(color.hsl); // hsl(0, 100%, 50%)
    console.log(color.hsla); // hsla(0, 100%, 50%, 1)
    console.log(color.source.rgba); // {r: 254, g: 0, b: 0, a: 1}
    console.log(color.source.hsla); // {h: 0, s: 100, l: 50, a: 1}
});

When the color has changed, the callback gets passed the color object and an object providing which color channels (out of H, S, V) have changed.

Methods

Name Description Example
show Displays the colorpicker colorPicker.show()
hide Hides the colorpicker colorPicker.hide()
destroy Destroy picker and events colorPicker.destroy()
getColor Gets the current color of the colorpicker colorPicker.getColor()
setPlacement Sets the placement of the colorpicker colorPicker.setPlacement('right')

Need Custom Color Picker?