Getting started

npm install @devix-labs/color-picker

<label for="brand">Brand colour</label>
<input id="brand" name="brand" value="#3a86ff">

import { createColorPicker } from '@devix-labs/color-picker';
import '@devix-labs/color-picker/styles.css';

const picker = createColorPicker(document.querySelector('#brand'), {
  format: 'oklch',
  swatches: ['#3a86ff', '#8338ec', '#ff006e', '#fb5607', '#ffbe0b'],
  contrastAgainst: '#ffffff',
  onCommit: (value) => console.log(value),
});

The input you point at keeps its name and carries the value, so a plain form posts the colour with no wiring at all. It fires input as the colour moves and change when it settles, which is what Livewire, Alpine, FormData and every server-rendered form already listen for.

Without an input — createColorPicker(document.querySelector('#swatch')) on a div — the picker just renders there and you read it from getValue() or the events.

The notations#

The text field takes any of these, typed or pasted, and Enter applies it without submitting the form the picker happens to be in:

#3a86ff   3a86ff   #39f   #3a86ff80
rgb(58 134 255)        rgba(58, 134, 255, 0.5)
hsl(217 100% 61%)      hsl(217 100% 61% / 50%)
oklch(70% 0.15 250)    oklch(0.7 0.15 250 / 0.5)
rebeccapurple

The button beside the field cycles which one is shown. Choose the starting notation with format, and which ones the button offers with formats:

createColorPicker(input, { format: 'oklch', formats: ['oklch', 'hex'] });

getValue() returns the notation on show; getValue('hex') returns the one you ask for.

Where to go next#

• Colour, contrast and OKLCH — what the picker knows, and how to use it without the widget.
• Options, methods and events
• React, Vue, Svelte and a plain page
• The keyboard and screen readers
• Styling and theming
• Moving from react-colorful or Pickr