React Color
A Collection of Color Pickers from Sketch, Photoshop, Chrome & more
Chrome
hex
r
g
b
a
Sketch
Color Picker
new
current
OK
Cancel
h
s
v
r
g
b
#
°
%
%
Photoshop
Slider
hex
r
g
b
Compact
hex
r
g
b
Material
Swatches

About

7 Different Pickers - Sketch, Photoshop, Chrome and many more

Popup or Block - It can be used it as a popup or always visible

Make Your Own - Use the building block components to make your own

Getting Started

Install

Start by installing react-color via npm:

1
npm install react-color --save

Include the Component

Require react-color at the top of a component and then use ColorPicker in the render function:

1
2
3
4
5
6
7
8
9
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  render() {
    return <ColorPicker type="sketch" />;
  }
}

Display It

Display the color picker popup on click, or don't define display and it will always be visible.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker display={ this.state.displayColorPicker } type="sketch" />
      </div>
    );
  }
}

Component API

type

A string that defines the type of color picker theme to display. Types include: sketch chrome photoshop slider compact material swatches

onChange

Pass a function to call every time the color is changed. Use this to store the color in the state of a parent component or to make other transformations.

Keep in mind this is called on drag events that can happen quite frequently. If you just need to get the color once use onChangeComplete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  handleChange(color) {
    // color = {
    //   hex: '#333',
    //   rgb: {
    //     r: 51,
    //     g: 51,
    //     b: 51,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 0,
    //     l: .20,
    //     a: 1,
    //   },
    // }
  }

  render() {
    return <ColorPicker onChange={ this.handleChange } />;
  }
}

onChangeComplete

Pass a function to call once a color change is complete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  constructor() {
    super();
    this.state = {
      background: '#fff',
    };
    this.handleChangeComplete = this.handleChangeComplete.bind(this);
  }

  handleChangeComplete(color) {
    this.setState({ background: color.hex });
  }

  render() {
    return <ColorPicker onChangeComplete={ this.handleChangeComplete } />;
  }
}

color

Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.

Color accepts either a string of a hex color '#333' or a object of rgb or hsl values { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }. Both rgb and hsl will also take a a: 1 value for alpha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  constructor() {
    super();
    this.state = {
      background: '#fff',
    };
    this.handleChangeComplete = this.handleChangeComplete.bind(this);
  }

  handleChangeComplete(color) {
    this.setState({ background: color.hex });
  }

  render() {
    return <ColorPicker color={ this.state.background } type="sketch" onChangeComplete={ this.handleChangeComplete } />;
  }
}

In this case, the color picker will initialize with the color #fff. When the color is changed, handleChangeComplete will fire and set the new color to state.

display

By default, the color picker is a block element that is always visible. To display the popup programmatically, pass display a boolean value:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker display={ this.state.displayColorPicker } type="sketch" />
      </div>
    );
  }
}

onClose

If you are using the ColorPicker as a popup, you can pass a function to onClose that will fire when the popup is closed. The callback gets called with the latest color information as the first argument.

1
2
3
4
5
6
7
8
9
10
11
12
13
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  handleClose(color) {
    ...
  }

  render() {
    return <ColorPicker display={ true } onClose={ this.handleClose } />;
  }
}

position

Use position alongside display to position the popup relative to the container. It takes left right and below as options.

1
2
3
4
5
6
7
8
9
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  render() {
    return <ColorPicker position="below" display={ true } />;
  }
}

positionCSS

Use positionCSS alongside display to declare a custom position for the color picker with a CSS object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var React = require('react');
var ColorPicker = require('react-color');

class Component extends React.Component {

  render() {
    var popupPosition = {
      position: 'absolute',
      top: '100px',
      left: '20px',
    };
    return <ColorPicker positionCSS={ popupPosition } display={ true } />;
  }
}

Create Your Own

Parent Component

To make a custom color picker, create a top-level component that will act as the bridge with the ColorPicker component. Pass that component down on the custom property:

1
2
3
4
5
6
7
8
9
var React = require('react');
var ColorPicker = require('react-color');
var CustomColorPicker = require('./CustomColorPicker');

class Component extends React.Component {
  render() {
    return <ColorPicker custom={ CustomColorPicker } />;
  }
}

This component will be passed hex, rgb and hsl values as props for the current color. It is also provided an onChange prop that should be called to propagate a new color. Pass it a hex string, or an rgb or hsl object.

Helper Components

Every color picker provided is made up of a collection of helper components. Those components are accessible for you to use to make a custom color picker.

<Alpha />

Use Alpha to display a slider to toggle the alpha value. Make sure to wrap it in a div that's the size you want the slider to be and that it is position: relative.

  • ...this.props - Pass down all the color props from your top-most component.
  • pointer - Define a custom pointer component for the slider pointer.
  • onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.
1
2
3
4
5
6
var { Alpha } = require('react-color/src/components/common');

<Alpha
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange } />

<EditableInput />

Use EditableInput to display an input / label that acts as the single source of truth until the input is blurred.

  • label - Used to put a label on the input.
  • value - The value to be passed down to the input.
  • onChange - Function callback. Use this to call the onChange function of the parent. Returns an object where the key is the label and the value is the new value.
  • style - Inline css to style the children elements: { wrap: {}, input: {}, label: {} }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var { EditableInput } = require('react-color/src/components/common');

var inputStyles = {
  input: {
    border: none,
  },
  label: {
    fontSize: '12px',
    color: '#999',
  },
};

<EditableInput
  style={ inputStyles }
  label="hex"
  value={ this.props.hex }
  onChange={ this.handleChange } />

<Hue />

Use Hue to display a slider to toggle the hue value. Make sure to wrap it in a div that's the size you want the slider to be and that it is position: relative.

  • ...this.props - Pass down all the color props from your top-most component.
  • pointer - Define a custom pointer component for the slider pointer.
  • onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.
  • direction - Display direction of the slider. Horizontal by default.
1
2
3
4
5
6
7
var { Alpha } = require('react-color/src/components/common');

<Hue
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }
  direction={ 'horizontal' || 'vertical' } />

<Saturation />

Use Saturation to display a saturation block that users can drag to change the value. Make sure to wrap it in a div that's the size you want the block to be and that it is position: relative.

  • ...this.props - Pass down all the color props from your top-most component.
  • pointer - Define a custom pointer component for the slider pointer.
  • onChange - Function callback. Make sure this calls the onChange function of the parent to make it change.
1
2
3
4
5
6
var { Alpha } = require('react-color/src/components/common');

<Saturation
  {...this.props}
  pointer={ CustomPointer }
  onChange={ this.handleChange }  />

More Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var React = require('react');
var ColorPicker = require('react-color');

class ButtonExample extends React.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  handleClose() {
    this.setState({ displayColorPicker: false });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Pick Color</button>
        <ColorPicker
          display={ this.state.displayColorPicker }
          onClose={ this.handleClose }
          type="chrome" />
      </div>
    );
  }
};
hex
r
g
b
a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var React = require('react');
var ReactCSS = require('reactcss');
var ColorPicker = require('react-color');

class SketchExample extends ReactCSS.Component {

  constructor() {
    super();
    this.state = {
      displayColorPicker: false,
      color: '#F17013',
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  classes() {
    return {
      'default': {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          background: this.state.color,
        },
        swatch: {
          padding: '5px',
          background: '#fff',
          borderRadius: '1px',
          boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
          display: 'inline-block',
          cursor: 'pointer',
        },
      },
    };
  }

  handleClick() {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  }

  handleClose() {
    this.setState({ displayColorPicker: false });
  }

  handleChange(color) {
    this.setState({ color: '#' + color.hex });
  }

  render() {
    return (
      <div>
        <div is="swatch" onClick={ this.handleClick }>
          <div is="color" />
        </div>
        <ColorPicker
          color={ this.state.color }
          position="below"
          display={ this.state.displayColorPicker }
          onChange={ this.handleChange }
          onClose={ this.handleClose }
          type="sketch" />
      </div>
    );
  }
};