Go to rebrand

Color Picker Component

Complete, customizable color picker using Pickr

How to use it

  1. Include ca_styleguide_color_picker.js
  2. Include ca_styleguide_color_picker.css

Minimal markup is required because the plugin replaces it with new markup.

Since the original placeholder is replaced, it's recommended to use a wrapper around the element.

Place the placeholder with the class js-ca-colorpicker inside your wrapper div.

ORIGINAL CODE <div class="picker1"> <div class="js-ca-colorpicker"></div> </div> CODE AFTER INITIALIZATION - Overview, not all options are available to use right now, only what's provided here. <div class="picker1"> <div class="pickr"> <div class="pcr-button"></div> <div class="pcr-app visible";> <div class="pcr-selection"> <div class="pcr-color-preview"> <div class="pcr-last-color"></div> <div class="pcr-current-color"></div> </div> <div class="pcr-color-palette"> <div class="pcr-picker"></div> <div class="pcr-palette"></div> </div> <div class="pcr-color-chooser"> <div class="pcr-picker"></div> <div class="pcr-hue pcr-slider"></div> </div> <div class="pcr-color-opacity";> <div class="pcr-picker"></div> <div class="pcr-opacity pcr-slider"></div> </div> </div> <div class="pcr-interaction"> <input class="pcr-result" type="text" spellcheck="false"> <input class="pcr-type active" data-type="HEX" value="HEX" type="button"> <input class="pcr-type" data-type="RGBA" value="RGBa" type="button"> <input class="pcr-type" data-type="HSLA" value="HSLa" type="button"> <input class="pcr-type" data-type="HSVA" value="HSVa" type="button"> <input class="pcr-type" data-type="CMYK" value="CMYK" type="button"> <input class="pcr-save" type="button"> <input class="pcr-clear" value="Clear" type="button"> </div> </div> </div> </div>

The component is styled from the class .pickr below. To customize, use your wrapper class + .pickr.

All pickr elements will fire the following events upon:

  • Color change: com.consumeraffairs.styleguide.colorpicker.onchange
  • Save button: com.consumeraffairs.styleguide.colorpicker.onsave

Add event listeners on your pickr instances to act upon them.


You can set the component default color by adding a data-default-color="" attribute to the .ja-ca-colorpicker element.

The following example uses the CA blue color (#0077c0) as default:

Pick a color, any color
<div class="pickers"> <div class="js-ca-colorpicker" data-default-color="0077c0"></div> </div>


The minimum size recommended is 350px. You should insert it inside a wrapper element that somehow limits the width, like using "width", or "max-width".

<div class="pickers" style="max-width: 350px"> <div class="js-ca-colorpicker"></div> </div>
Pick a color, any color

Any size above 350px is safe to use.

<div class="pickers" style="width: 50%"> <div class="js-ca-colorpicker"></div> </div>
Pick a second color

They are independent and mobile-friendly.

<div class="pickers" style="width: 100%"> <div class="js-ca-colorpicker"></div> </div>
Pick a third color