JSDoc: Global

Colr Pickr

Methods

ColorPicker(element, coloropt)

Colr Pickr Constructor

Parameters:
Name Type Attributes Description
element HTMLElement

Define the button that you want to open this instance of the color picker

color string <optional>

The default color that the button and color picker instance will start out as

Source:
Example
const button = document.getElementById('my_button');
let picker = new ColorPicker(button, '#ffffff');

Events

colorChange

Event to fire whenever the color picker is closed for new details on the color instance. Calling event.detail will return an object of the following:

Source:
Returns:

  • color - Object of color values

    Type
    object

  • color.hex - Hex value of chosen color

    Type
    string

  • color.rgb - RGB value of chosen color

    Type
    string

  • color.hsl - HSL value of chosen color

    Type
    string

  • color.hexa - HexAlpha value of chosen color

    Type
    string

  • color.rgba - RGBA value of chosen color

    Type
    string

  • color.hsla - HSLA value of chosen color

    Type
    string
Example
const button = document.getElementById('my_button');
button.addEventListener('colorChange', function () {
  const newColor = event.detail.color.hexa;
});

colorPickerComp

Creation of the colorPickerComp object

Source:

Methods

(static) colorChange(color, elem)

Function to change the color of an instance via a JavaScript function

Parameters:
Name Type Description
color string

The color you are changing the instance to
elem HTMLElement

The button HTMLElement that is a part of the instance
Source:
Example
const button = document.getElementById('my_button');
colorPickerComp.colorChange('#ff0000', button);

(static) getCustomColors()

Gets an array of all the saved custom colors

Source:
Example
const savedColor = colorPickerComp.getCustomColors();