@palette/color-picker

🎨 @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

Type	Required?	Default
string	YES	red

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

Type	Required?	Default
array	N	['hex', 'hex8', 'rgb', 'hsl']

An array of color formats to accept

mode

Type	Required?	Default
string	N	color mode of defaultValue
The mode with which to initialize the picker.

update

Type	Required?	Default
function(evt)	N	none

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

Type	Required?	Default
bool	N	true

Chooses whether to show the Color Inspector (eyedropper) subcomponent

showSliders

Type	Required?	Default
bool	N	true

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

showValues

Type	Required?	Default
bool	N	true

Chooses whether to show the Color Value Editor subcomponent

Custom Swatch Recommendations

showSwatches

Type	Required?	Default
bool	N	true

Chooses whether to show the Color Swatch subcomponent

swatches

Type	Required?	Default
object[]	N	true

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

Type	Required?	Default
string	N	''

Provide a label to describe your swatches

swatchesTooltip

Type	Required?	Default
bool	N	true

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