Dark | Light |
---|---|
![]() |
![]() |
Note: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.
<link rel="stylesheet" href="https://github.com/ivanvmat/color-picker/blob/main/dist/color-picker.min.css"/>
<script type="text/javascript" src="https://github.com/ivanvmat/color-picker/raw/main/dist/color-picker.min.js"></script>
// Simple example, see optional options for more configuration.
const picker = new ColorPickerControl({
container: document.body,
theme: 'dark'
});
You can find more examples here.
Use the on(event, cb)
and off(event, cb)
functions to bind / unbind event listener.
Event | Description | Arguments |
---|---|---|
open |
Color picker got opened | ColorPickerControlInstance |
change |
Color has changed | HSVaColorObject |
close |
Color picker got closed | ColorPickerControlInstance |
Example:
picker.on('open', (instance) => { console.log('Event: "open"', instance); }); picker.on('change', (color) => { console.log('Event: "change"', color); }); picker.on('close', (instance) => { console.log('Event: "close"', instance); });