Alwan

           

A simple, zero dependencies, pure vanilla javascript, lightweight (only ~13Kb) color picker.

features

• Touch friendly.
• Support dark theme.
• Alpha channel (opacity).
• Support 3 color formats hsl, rgb and hex.
• Keyboard accessible.
• Simple easy to use interface (inspired by google chrome's color picker).
• No dependencies.
• Copy color to the clipboard.
• Lightweight.

Demo

Click here to try it

Getting started

Install using package manager:

npm install alwan

or

yarn add alwan

Import files

// Import javascript.
import alwan from 'alwan';
// Import css.
import 'alwan/dist/css/alwan.min.css';

CDN

Add it to your page.

• Jsdelivr CDN

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

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

• Unpkg CDN

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

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

Usage

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

const alwan = new Alwan('#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 --tw-color.
E.g.

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

Events

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

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

ColorObject

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

• hsv() : object — Gets an HSV color object.

• rgb(asArray: boolean) : object — Get an RGB color object or an Array if asArray is set to true, call the method toString() on this object to get an RGB string.

• hsl(asArray: boolean) : object — Get an HSL color object or an Array if asArray is set to true, call the method toString() on this object to get an HSL string.

• hex() string — Gets a hex color.

// e.g.
alwan.on('change', (color, el) => {
  // RGB color.
  color.rgb()                // output: { r: 0, g: 0, b: 0, a: 1}
  color.rgb(true)            // output: [0, 0, 0, 0]
  color.rgb().toString()     // output: rgba(0, 0, 0, 1)
  
  // Hex color.
  color.hex()                // output: #000000
  
  // HSL color.
  color.hsl()               // output: { h: 0, s: 0, l: 0, a: 1 }
  color.hsl(true)           // output: [0, 0, 0, 0]
  color.hsl().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 .trigger(change | color) to it

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

• getColor() : object — Returns the color object.

• open() — Open/Show 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.

• trigger(event: string) — Triggers 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() — Disables picker (users won't be able to pick a color).

• enable() — Enables picker.

• reposition() — Updates picker position only if it's a popover.

• addSwatch(color: string) — Adds a swatch button.

• 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 in the Options.swatches array or an index.

• reset() — Reset to default color.

• destroy() — Removes the color picker functionality completely(free up memory).