Package Exports
- alwan
- alwan/dist/js/alwan.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (alwan) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Alwan


A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.
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
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
id
(default''
) — Set the container's (widget) id.classname
(default''
) — One or many classes (separated by a white space) to add to the preset button.theme
(defaultlight
) — Choose a theme, 'dark' or 'light'.toggle
(defaulttrue
) — Toggle picker's visibility (Show/Hide), Setting this to false keeps the picker visible.popover
(defaulttrue
) — Display picker as a popover, otherwise display it as a block (embeded in the page content).position
(defaultbottom-start
) — Set the position of the popper relative to the reference element. The position has two values seperated by a dash (-). The first value is the direction (top, bottom, right, left) and the second value is the alignment (start, center, end), omitting this value will default to center.Note: If the picker container has no space to be placed, it will auto-position itself based on the available space.
margin
(default8
) — The gap (in pixels) between the picker container and the reference element.preset
(defaulttrue
) — Replace the reference element with a pre-styled button.color
(default#000
) — Initial color.default
(default#000
) — Default color.target
(default''
) — Target can be a selector or an HTML element, If the option popover is set to true, the picker container will be positionned retalive to this element else if popover option is set to false, the picker container will be appended as a child into this element.disabled
(defaultfalse
) — Disable the picker, users won't be able to pick colors.format
(defaultrgb
) — Initial color format.singleInput
(defaultfalse
) — For the formats 'hsl' and 'rgb', choose a single input to display the color string, if false, display an input for each color channel.inputs
(default{ hex: true, rgb: true, hsl: true }
) — Choose color formats for the picker input.opacity
(defaulttrue
) — Support alpha channel and display opacity slider.preview
(defaulttrue
) — Preview the color.copy
(defaulttrue
) — Add/Remove a copy button.swatches
(default[]
) — Array of colors, invalid colors will default to rgb(0,0,0).toggleSwatches
(defaultfalse
) — Show/Hide swatches container (Make swatches container collapsible).shared
(defaultfalse
) — Picker widget shared between multiple instance (this is good if you have many color picker instances).
Note: In the reference element you can access the css custom property --lw-color
to get color value.
Events
Use the method on
, that has two parameters, event
and handler
(callback function).
alwan.on('event', ev => {
// ...
});
Event | Argument | Description |
---|---|---|
open |
event |
Fires when the picker get opened |
close |
event |
Fires when the picker get closed |
change |
event |
Fires when an alternation to the color is committed by the user, similar to the DOM change event |
color |
event |
Similar to the input event, fires every time the color changes |
Event object
type
— Event type.source
— Event source.hsv() :
object
— Gets an HSV color object.rgb(asArray:
boolean
) :object
— Get an RGB color object or an Array ifasArray
is set to true, call the methodtoString()
on this object to get an RGB string.hsl(asArray:
boolean
) :object
— Get an HSL color object or an Array ifasArray
is set to true, call the methodtoString()
on this object to get an HSL string.hex()
string
— Gets a hex color.
// e.g.
alwan.on('change', (ev) => {
ev.type // change
ev.source // Element
// RGB color.
ev.rgb() // output: { r: 0, g: 0, b: 0, a: 1}
ev.rgb(true) // output: [0, 0, 0, 0]
ev.rgb().toString() // output: rgba(0, 0, 0, 1)
// Hex color.
ev.hex() // output: #000000
// HSL color.
ev.hsl() // output: { h: 0, s: 0, l: 0, a: 1 }
ev.hsl(true) // output: [0, 0, 0, 0]
ev.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 triggerchange
orcolor
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 openedtrue
or closedfalse
.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 theOptions.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).