sc-picker v1.0.3

sc-picker

A simple, lightweight color picker.

features

• Small file size.
• Touch friendly.
• Support dark theme.
• Alpha channel (opacity).
• Support 3 color formats hsl, rgb and hex.
• Keyboard accessible.
• Simple interface (inspired by google chrome's color picker).
• No dependencies.

Demo

Click here to try it

Getting started

Install using package manager:

npm install sc-picker

or

yarn add sc-picker

import files

// Import javascript.
import picker from 'sc-picker';
// Import css.
import 'sc-picker/dist/css/picker.min.css';

CDN

Add it to you page.

• Jsdelivr CDN

<!-- Style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sc-picker/dist/css/picker.min.css">

<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/sc-picker/dist/js/picker.min.js"></script>

• Unpkg CDN

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/sc-picker/dist/css/picker.min.css">

<!-- Script -->
<script src="https://unpkg.com/sc-picker/dist/js/picker.min.js"></script>

Usage

createPicker can take two arguments, a reference element either a selector or an HTML element (required), and options object (optional).

const picker = createPicker('#reference', {
  // Options...
});

Options

You can try these options in the demo, play around with it :)

Note: In case you set the preset to false (using your own reference element), to access the color to change its background or any other property, add the css custom property to your styles --sc-color.
E.g.

#my-reference-element {
  background-color: var(--sc-color);
}

Events

Use the method on, that takes two parameters, event and handler (callback function).

picker.on('event', function(argument) {
  // ...
});

ColorObject

Color object is the output of the color picker, its properties are:

• h: number - Color Hue.
• s: number - Saturation in the HSV format.
• v: number - Value in the HSV format.
• a: number - Alpha (opacity) only if Options.opacity is set to true.

and its methods

• toRGB(asArray: boolean)

  Gets an RGB color object or Array if asArray is set to true, call the method toString() on this method to get an RGB string.

• toHSL(asArray: boolean)

  Gets an HSL color object or Array if asArray is set to true, call the method toString() on this method to get an HSL string.

• toHEX()

  Gets a hex color.

// e.g.
picker.on('change', function(color) {
  // RGB color.
  color.toRGB()             // output: { r: 0, g: 0, b: 0, a: 1}
  color.toRGB(true)         // output: [0, 0, 0, 0]
  color.toRGB().toString()  // output: rgba(0, 0, 0, 1)
  
  // Hex color.
  color.toHEX()             // output: #000000
  
  // HSL color.
  color.toHSL()             // output: { h: 0, s: 0, l: 0, a: 1 }
  color.toHSL(true)         // output: [0, 0, 0, 0]
  color.toHSL().toString()  // output: hsla(0, 0%, 0%, 1)
})

Methods

• setColor(color: string | object) : object

  Sets a color from a string or a color object, this method doesn't trigger change or color events if you want to trigger events add .change() or .color() to it

  // Set color 'purple' and trigger 'change' event.
  picker.setColor('purple').change()

• getColor() : object

  Returns the color object.

• open()

  Open/Show picker.

• close()

  Close/Hide picker.

• isOpen() : boolean

  Returns the state of the picker opened true or closed false.

• toggle()

  Toggle picker, if its hidden show it else hide it.

• setOptions(options: object)

  Sets one or more options for the picker.

• getOptions(): object

  Gets picker options.

• trigger(event: string)

  Triggers or fires an event.

• on(event: string, handler: callback)

  Attaches an event handler function.

• off(event: string, handler: callback)

  Removes an event handler, if the handler argument is omitted then all handlers attach to this event will be removed, calling this method without arguments will remove all handlers of all events.

• disable()

  Disable picker (users won't be able to pick a color).

• enable()

  Enable picker.

• updatePosition()

  Updates picker position only if it's a popover.

• addSwatch(color: string)

  Adds the color to the Options.swatches array, also created and append a swatch button to the swatches container.

• removeSwatch(swatch: string | number)

  Removes color from the Options.swatches array, also removes its button from the swatches container.

  Note: swatch argument can be a color string (must exist in Options.swatches array) or an index.

• reset()

  Reset default color.

• destroy()

  Removes any HTML elements created by this instance and destroy all functionality (free up memory).