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

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