Guide
Moving from react-colorful or Pickr
From react-colorful
react-colorful is 2.8 kB and does one thing: the square and the sliders. What people ask for on top of it — a hex or RGB field, OKLCH, a copy button — is what this ships. Roughly:
// before
import { HexColorPicker, HexColorInput } from 'react-colorful';
<HexColorPicker color={color} onChange={setColor} />
<HexColorInput color={color} onChange={setColor} />
// after
import { ColorField } from '@devix-labs/color-picker/react';
import '@devix-labs/color-picker/styles.css';
<ColorField value={color} onChange={setColor} />
| react-colorful | Here |
|---|---|
<HexColorPicker>, <RgbaColorPicker>, one component per notation |
one <ColorField>; format and formats decide what is shown |
color / onChange as an object for the Rgba pickers |
always a CSS string; picker.getRgb() if you want the object |
<HexColorInput>, a separate component |
the field is part of the picker |
.react-colorful__saturation and friends |
.dxc-area, .dxc-hue, .dxc-alpha, and CSS variables |
| React only | React, Vue, Svelte, a web component, or none |
The behaviour differences you will notice: the hue no longer resets when you drag into white or
black, the square is reachable with two arrow-key axes rather than one slider, and oklch() is a
notation you can type.
From Pickr
// before
const pickr = Pickr.create({
el: '#brand',
theme: 'nano',
default: '#3a86ff',
components: { preview: true, opacity: true, hue: true, interaction: { input: true, save: true } },
});
pickr.on('save', (color) => save(color.toHEXA().toString()));
// after
import { createColorPicker } from '@devix-labs/color-picker';
import '@devix-labs/color-picker/styles.css';
createColorPicker(document.querySelector('#brand'), {
value: '#3a86ff',
onCommit: (value) => save(value),
});
| Pickr | Here |
|---|---|
components: { ... } |
alpha, copy, eyedropper, swatches, contrastAgainst |
theme: 'classic' | 'monolith' | 'nano' |
one layout, styled with CSS variables |
pickr.on('save' | 'change') |
onCommit / onChange, or the dx:colorcommit / dx:colorchange events |
color.toHEXA().toString(), toRGBA(), toHSLA() |
picker.getValue('hex' | 'rgb' | 'hsl' | 'oklch') |
pickr.setColor('#fff') |
picker.setValue('#fff') |
pickr.destroyAndRemove() |
picker.destroy() |
| A popup attached to a button | rendered in place; wrap it in your own popover if you want one |
Pickr is 0 dependencies and about 12 kB, and its own README advises against starting new projects with it.
From react-color
react-color was last published in October 2020 and has 229 open issues, including the one asking whether it is abandoned. The closest swap:
// before
import { SketchPicker } from 'react-color';
<SketchPicker color={color} onChangeComplete={(c) => setColor(c.hex)} />
// after
import { ColorField } from '@devix-labs/color-picker/react';
<ColorField value={color} swatches={presets} onCommit={setColor} />
color.hex, color.rgb and color.hsl become getValue('hex'), getRgb() and getValue('hsl').
Alpha in hex — #rrggbbaa, asked for in 2020
and never shipped — works in both directions here.
From a native <input type="color">
createColorPicker(document.querySelector('#brand'));
Point it at the input and you keep the form field, the name and the value, and gain a colour the
person can type, an opacity channel, OKLCH, and a picker that looks the same in every browser
instead of three different OS dialogs. Set type="text" on the input first — the picker hides it
either way, but a color input cannot hold #3a86ff80.