Javascript Color Picker

Demo
Features
Download
Getting started
- IIFE Bundle
- ESM Bundle
Options
- Configuration
Methods
- Dialog only with prompt
- Retrieving selected color
Events
The Color object
Customization
- Color scheme
- CSS variables
Tips
License

JS Color Picker Demo

Theme:

Button element

Edit on

Input element

Edit on

Anchored to element (headless)

#069eff

Edit on

Positioned dialog (headless)

Edit on

Swatches only

Edit on

JS Color Picker Features

Open Source
Free
Zero dependencies
Light weight (42kB minified, 14.5kB minified and gzipped)
Easy to use and customize
Touch friendly
Light and dark theme
Alpha channel (can be disabled)
Color swatches
Uses popper.js for posititioning
Eyedropper on Chrome and Edge
Four color formats: Hex, RGB, HSV and HSL (and supports named colors too)
Keyboard navigation

Download JS Color Picker

Download
Please visit our GitHub repository to download JSColorPicker.

Getting Started with JS Color Picker

JSColorPicker requires a tiny stylesheet. Please include it like this:

<link rel="stylesheet" href="colorpicker.min.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

IIFE Bundle

Import the IIFE script using a script tag in your HTML:

<script src="colorpicker.iife.min.js"></script>

This exposes the ColorPicker class (on the global window object).

ESM Bundle

Import the ESM bundle using the import directive in your script:

import ColorPicker from 'colorpicker.min.js'

This allows you to use ColorPicker directly.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/css/colorpicker.min.css">
</head>
<body>
  <button id="demoButton"></button>

  <script type="module">
    import ColorPicker from '/js/colorpicker.min.js'
    new ColorPicker('#demoButton')
  </script>
</body>
</html>

JS Color Picker Options

Configure the ColorPicker by passing the element to bind it to and a configuration object. The element to bind to (first argument to ColorPicker constructor) can either be:

A DOM element (HTMLElement)
A DOM selector (string)
null: A <button> element will be created, which you can then append to the DOM:
```
const picker = new ColorPicker()
picker.appendTo(document.body)
```

The ColorPicker can behave in three ways:

as a button that users click to select a color (CodePen demo)
as a HTML <input> element, which includes a color thumbnail that shows the selected color (CodePen demo). The <input> element behaves like a regular HTML input element:
- you can read its value:
```
const color = document.querySelector('#color').value
```
- you can change its value:
```
const ipt = document.querySelector('#color')
ipt.value = '#f00'
ipt.dispatchEvent(new Event('change')) // Fire change event
```
As a headless component that you, the programmer, render at will (more info).

Configuration

const picker = new ColorPicker(element, {
  /**
   * How to render the ColorPicker: as an input element or a button?
   * Default: 'button'
   */
  toggleStyle: 'button' | 'input',

  /**
   * When enabled, run the picker in headless mode:
   * - leaves the target element untouched, and does not render a toggle
   * - requires manually calling the prompt() method to show the dialog
   * - still positions the dialog relative to the target element
   * Default: false
   */
  headless: false,

  /**
   * The HTML element the picker dialog will be appended to. When you experience
   * issues focusing the input element in the ColorPicker, changing this will help.
   * Required when using the ColorPicker inside a Bootstrap OffCanvas or Modal.
   * By default, this is the body.
   */
  container: HTMLElement | string | null,

  /**
   * The initial color.
   * When toggleStyle == 'input', the default color will be taken from the input's
   * value (set color to null).
   * You can also set a data-color attribute on the element the ColorPicker is
   * attached to (set color to null).
   * Default: null
   */
  color: string | null,

  /**
   * A list of predefined color swatches available for selection.
   * Pass null, false or an empty array to disable them altogether.
   * Default: null
   */
  swatches: string[] | null | false,

  /**
   * Hide hsv, hue and alpha sliders as well as format selector and input field.
   * Keep swatches only. Picking a color will close the dialog.
   * You must provide an array of swatches as well (duh!)
   * Default: false
   */
  swatchesOnly: boolean,

  /**
   * Whether to enable the alpha (transparency) slider.
   * Default: true
   */
  enableAlpha: boolean,

  /**
   * Whether to enable the built-in eyedropper tool for selecting colors from the screen.
   * As of January 2025, this is only supported on Chromium based browsers: https://caniuse.com/mdn-api_eyedropper
   * Default: true
   */
  enableEyedropper: boolean,

  /**
   * The set of color formats the user can choose from.
   * Pass null or false to disable format selection.
   * Default: ['hex', 'rgb', 'hsv', 'hsl']
   */
  formats: ColorFormat[] | null | false,

  /**
   * The default color format to select when multiple formats are enabled.
	* If there are no formats to choose from (formats: null|false), this set
	s the color format of the color picker's input field.
   * Default: 'hex'
   */
  defaultFormat: 'hex' | 'rgb' | 'hsv' | 'hsl',

  /**
   * Determines how the chosen color is applied:
   * - 'instant': applies immediately as the user picks a color
   * - 'confirm': requires user confirmation (via a submit button)
   * Default: 'confirm'
   */
  submitMode: 'instant' | 'confirm',

  /**
   * Whether to show the clear button for resetting the color.
   * Default: false
   */
  showClearButton: boolean

  /**
   * Whether the color picker should close when clicking outside of it.
   * Default: true
   */
  dismissOnOutsideClick: boolean

  /**
   * Whether the color picker should close when escape is pressed.
   * Default: true
   */
  dismissOnEscape: boolean

  /**
   * How to place the dialog relative to the toggle. This is where the color dialog
   * will be shown, if there is room. If not, the dialog will be shown there where
   * there is room.
   * Default: 'top'
   */
  dialogPlacement: 'top' | 'bottom' | 'left' | 'right'

  /**
   * How big the gap between the toggle and dialog should be, in pixels.
   * Default: 8
   */
  dialogOffset: number

  /**
   * How to place the dialog when no anchor element is defined.
   * Default: 'top'
   */
  staticPlacement: 'top left' | 'top center' | 'top right' |
                   'center left' | 'center center' | 'center right' |
                   'bottom left' | 'bottom center' | 'bottom right'

  /**
   * How big the gap between the dialog and the edge of the page should be, in pixels.
   * Default: 8
   */
  staticOffset: number
})

JS Color Picker Methods

The following methods can be called on a ColorPicker instance:

/**
 * Get selected color
 * @returns {Color}
 */
const color = picker.color
console.log('Picked color', color ? color.string('rgb' /* hex|rgb|hsl|hsv */) : null)

/**
 * Get swatches
 * @returns string[]
 */
console.log(picker.swatches)

/**
 * Get currently selected (not submitted) color
 * useful when submitMode == 'confirm'
 * Returns {Color}
 */
console.log(picker.selectedColor)

/**
 * Set a color
 * @param {Color} color. Can either be
 * - a hex(a) or rgb(a) string:  '#f0f', '#aabbcc99', 'rgb(255,0,0)', 'rgba(0,128,244,.5)'
 * - a named color: 'red', 'black', 'transparent'
 * - an array of numbers, representing H, S, V, A: [.6, .5, 1, .5]
 * - a Color object (see below)
 * @param {bool} emit Whether or not to emit pick event
 */
picker.setColor(color: Color | number[] | string | null, emit = true)

/**
 * Update swatches
 * @param {array} swatches An array of new colors for swatches
 *                Use null/false for no swatches
 */
picker.setSwatches(swatches: string[] | null | false)

/**
 * Set format
 * @param {string} format Either 'rgb', 'hex', 'hsv' or 'hsl'
 * @param {bool} update Whether or not to update/convert the selected color
 */
picker.setFormat(format: ColorFormat, update = true)

/**
 * Clear the color
 * @param {bool} emit Whether or not to emit pick event
 */
picker.clear(emit = true)

/**
 * Open the ColorPicker.
 * @param {bool} emit Whether or not to emit open/opened events
 */
picker.open(emit = true)

/**
 * Close the ColorPicker.
 * @param {bool} emit Whether or not to emit close/closed events
 */
picker.close(emit = true)

/**
 * Toggle the ColorPicker. Open when closed, close when opened
 * @param {bool} value Whether to close or open the ColorPicker
 * @param {bool} emit Whether or not to emit open/opened and close/closed events
 */
picker.toggle(value = !this._open, emit = true)

/**
 * Destroy the picker, restore DOM to what it was before the ColorPicker was attached
 */
picker.destroy()

Dialog only with `prompt`

If you want to open a picker dialog without an explicit toggle element, (optionally) destroying it after, you can use the headless option with the prompt() method. prompt() returns a promise once the picker is closed.

Position the dialog relative to a DOM element

The colorpicker dialog will open anchored to a DOM element (first arg to ColorPicker constructor). Use the dialogPlacement config to control where the dialog appears, relative to this DOM element.
CodePen example.

const picker = new ColorPicker(element, {
  headless: true,
  // dialogPlacement: 'top' | 'bottom' | 'left' | 'right'
})

const color = await picker.prompt(true /* destroy instance after color is picked */)
// color now contains a Color object, see below

Position the dialog on a fixed position

The colorpicker dialog will open on a fixed position. Use null as the first argument to the ColorPicker constructor. Use the staticPlacement config option to determine the dialog's position on screen. Options are: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right. Optionally use the staticOffset config option to alter the dialog's offset.
CodePen example.

const picker = new ColorPicker(null, {
  headless: true,
  staticPlacement: 'center center',
  staticOffset: 10 // in pixels
})
.on('pick', color => {
  console.log('You picked', color.string('hex'))
})
.prompt()

Retrieving selected color

You can retrieve the color the user selected in several ways.

Listen to the pick event:

/**
 * The pick event is fired when the user selects a color.
 * When submitMode == 'instant', this event is fired as soon as a color is picked
 * When submitMode == 'confirm', this event is fired when the user clicks the Submit button
 * The color argument is either null (when the color is cleared, showClearButton == true) or a Color object, see below
 */
picker.on('pick', (color) => console.log('pick', color))

The color attribute returns the selected color, as a Color object:

const color = picker.color
console.log('Picked color', color ? color.string('rgb' /* hex|rgb|hsl|hsv */) : null)

Inspect the data-color attribute:

const el = document.querySelector('#picker');
const color = el.dataset.color;
// color contains the selected color, in format defined in config.defaultFormat
console.log('You picked color', color)

When config.toggleStyle == 'input', you can simply read the input's value:

const input = document.querySelector('input')
console.log('You picked color', input.value)

JS Color Picker Events

If you want to listen to certain events, like opening or picking, use the .on() method:

/**
 * The pick event is fired when the user selects a color.
 * When submitMode == 'instant', this event is fired as soon as a color is picked
 * When submitMode == 'confirm', this event is fired when the user clicks the Submit button
 * The color argument is either null (when the color is cleared, showClearButton == true) or a Color object, see below
 */
picker.on('pick', (color) => console.log('pick', color))

/**
 * The following events are fired when the picker is opening/closing and opened/closed (transition is complete)
 */
picker.on('open', () => console.log('open'))
picker.on('opened', () => console.log('opened'))
picker.on('close', () => console.log('close'))
picker.on('closed', () => console.log('closed'))

JS Color Picker `Color` object

For maximum flexibility, the pick event receives a Color object. You can query this object to retrieve the color the user selected in any format you like: RGB(A), HEX(A), HSV or HSL.
Use the string function on the Color object for this.

picker.on('pick', (color) => {
  if (!color) {
    return console.log('Color cleared')
  }
  console.log(
    'Color picked',
    // When a Color object is converted to a string, you'll get HEX(A) notation
    color.toString(),
    color.string('hex'),
    color.string('rgb'), // returns `rgb(r,g,b)`, or `rgba(r,g,b,a)` when opaque
    color.string('rgba'), // always returns `rgba(r,g,b,a)`
    color.string('hsv'),
    color.string('hsl')
  )
 })

When a rgb color is requested (color.string('rgb')), and the color has opacity applied (alpha < 1), then you will receive an rgba color value.

JS Color Picker Customization

Color scheme

You can change the color scheme (light & dark) 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>

CSS variables

You can alter a variety of styles using their respective CSS variables:

/* 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;

JS Color Picker Tips

Double-click the input field in the Color Picker dialog to copy the selected color to the clipboard.
You can bind the Color Picker to either an <input type="text"> or an <input type="color"> element.

Here's how to include a color field in a form GET or POST.
Bind the colorpicker to an <input> element that has a name:

<form action="submit.php" method="post">
  <input type="text" name="color">
  <button type="submit">Submit</button>
</form>

<script>
new ColorPicker('input[name="color"]')
</script>

The size of the colorpicker-button can easily be changed by overwriting the --cp-size CSS variable:

<div style="--cp-size:4em" id="ColorPickerXL" data-color="#33992288"></div>
<script>
new ColorPicker('#ColorPickerXL')
</script>

The ColorPicker exposes a static Color-class you can use to manipulate colors. Available functions: hue(number), saturation(number), value(number), alpha(number)
```
const color = new ColorPicker.Color('red');
console.log(color.hue(200).alpha(.5).string('rgb'))
```
This outputs rgba(0,170,255,.5)

License

JSColorPicker was created by Zygomatic, is open source and licensed under the MIT license.

Contents

JS Color Picker Demo

Button element

Input element

Anchored to element (headless)

Positioned dialog (headless)

Swatches only

JS Color Picker Features

Download JS Color Picker

Getting Started with JS Color Picker

IIFE Bundle

ESM Bundle

JS Color Picker Options

Configuration

JS Color Picker Methods

Dialog only with prompt

Retrieving selected color

JS Color Picker Events

JS Color Picker Color object

JS Color Picker Customization

Color scheme

CSS variables

JS Color Picker Tips

License

Dialog only with `prompt`

JS Color Picker `Color` object