An open source, free (as in beer), versatile, flexible and lightweight Javascript Color Picker Component supporting light and dark skins, swatches, multiple color formats, CSS color parsing, instant and confirm modes and much more.
Please visit jscolorpicker.com for more detailed documentation and extensive demo's.
- Features
- Live Demo
- Screenshots
- Installation
- Getting Started
- Documentation
- Customization
- Developing
- License
- 🏋️ Light weight (42kB minified, 14.5kB minified and gzipped)
- 0️⃣ Zero dependencies
- 😎 Easy to use and customize
- 🔼 Button, input and hidden styles
- 👆🏻 Touch friendly
- 🌙 Dark and light theme
- 🫥 Alpha slider (can be disabled)
- 🌈 Color Swatches
- 🔢 Multiple color formats
- ✢ Uses popper.js for positioning
- 🪞 Preview
- ✅ Apply color immediately, or on submit
- 📜 CSS color parsing (including named colors)
- 💧 EyeDropper on Chrome and Edge
- ⌨️ Keyboard support
- 🚫 Clearable
See the demo page
| Light | Dark | |
|---|---|---|
| Button |  |
 |
| Input |  |
 |
| Dialog |  |
 |
The color picker requires a tiny stylesheet. Please include it like this:
<link rel="stylesheet" href="colorpicker.css" />Now, depending on your environment, choose one of the following:
- IIFE Bundle → When using vanilla JavaScript, without ES modules
- ESM Bundle → When using ES modules or a bundler
Please import the IIFE script using a script tag in your HTML:
<script src="colorpicker.iife.js"></script>This exposes the ColorPicker class (on window).
Please import the ESM bundle using the import directive in your script:
import ColorPicker from 'colorpicker.js'This allows you to use ColorPicker directly.
To create a color picker, first create a button or input:
<button id="picker"></button>
<!-- or -->
<input id="picker" />Next instantiate the ColorPicker, passing an element to bind to and an (optional) configuration:
const picker = new ColorPicker('#picker', {
submitMode: 'instant'
})If you want to open or close the dialog, use their respective methods:
picker.open()
picker.close()
picker.toggle()
picker.destroy()You can also open it as a prompt, returning a promise once the picker is closed:
const color = await picker.prompt()If you want to set or clear the color, you can use the .setColor() and .clear() methods:
picker.setColor('#ff00ff')
picker.clear()If you want to listen to certain events, like opening or picking, use the .on() method:
picker.on('pick', (color) => console.log('pick', color))
picker.on('open', () => console.log('open'))
picker.on('opened', () => console.log('opened'))
picker.on('close', () => console.log('close'))
picker.on('closed', () => console.log('closed'))If you want to open a picker dialog without a toggle, (optionally) destroying it after, you can use the headless option with the prompt() method:
const picker = new ColorPicker(target, {
headless: true,
})
const color = await picker.prompt(true)For all methods and properties, please view the documentation.
You can change the color scheme by using one of the following dataset properties:
<html data-cp-theme="dark"></html>
<html data-bs-theme="dark"></html>
<html data-cp-theme="light"></html>
<html data-bs-theme="light"></html>You can alter a variety of styles using their respective CSS variables:
:root {
/* Metrics */
--cp-size: 2.375rem; /* Size of color picker thumb */
--cp-border-radius-sm: 0.25rem;
--cp-border-radius-lg: 0.5rem;
--cp-swatch-width: 2rem;
/* Colors */
--cp-body-bg: #fff;
--cp-body-color: #212529;
--cp-body-color-rgb: 33, 37, 41;
--cp-border-color: #ccc;
--cp-button-color: #ccc;
--cp-border-color-translucent: rgba(0, 0, 0, 0.175);
--cp-tertiary-color: rgba(33, 37, 41, 0.5);
/* Shadows */
--cp-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--cp-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
/* Animations (set to 0s to disable) */
--cp-delay: 150ms;
}To install dependencies:
bun|deno|npm|pnpm|yarn installTo build:
bun|deno|npm|pnpm|yarn run buildincluding minification:
sh build.sh
To run:
bun|deno|npm|pnpm|yarn run devThis component is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code. More Information
The development of this component was funded by Zygomatic.
