@palette/color-picker v0.1.6

🎨 @palette/color-picker

A hackable React color picker that exposes all the right things

Why another color picker?

Multiple Color Formats This color picker supports rgb(a), hsl(a), and hex(8), and will return a color in the format you (or your user) chooses.

Mix n match Don't get stuck using a color picker that has a predetermined configuration. Use props to mix and match different color editing components. And they actually all play nicely together.

Sane (Re)Styling This color picker does not pretend to think it knows exactly how everyone will want it to look. We implement base styles but also maintain sensible classes following SUIT Methodologies for easy style overrides.

Demo

See the picker in action (open the console and watch it print a color)

Including in your project

@palette/color-picker may be included as a node module like so:

npm install @palette/color-picker

Then it can be imported in your project like so:

import ColorPicker from '@palette/color-picker'

Usage

<ColorPicker value={'#FF0'} />

Component Configuration with Props

showInspector

The initial rendered color for your component & the only required Should be a string containing a valid color (rgb(a), hex(8), hsl(a), hsv)

modes

An array of color formats to accept

mode

The mode with which to initialize the picker.

update

A function to which the picker will return a color on updates. evt is the color in the prescribed mode.

Subcomponent Configuration with Props

showInspector

Chooses whether to show the Color Inspector (eyedropper) subcomponent

showSliders

Chooses whether to show the Color Range Sliders (hue & opacity)

showValues

Chooses whether to show the Color Value Editor subcomponent

Custom Swatch Recommendations

showSwatches

Chooses whether to show the Color Swatch subcomponent

swatches

Prescribe the default swatches that are shown in the color picker like:

[{
    name: 'some purpley pink',
    value: 'hsl(300, 76%, 72%, 0.67)',
    mode: 'hsl'
  }...]

swatchesLabel

Provide a label to describe your swatches

swatchesTooltip

Chooses whether to show a tooltip revealing a color's name of swatch hover