Solid
Gradient
Saturation
Lightness
Brightness
Color Guide
Analogous
Monochromatic
Triad
Tetrad
°
HEX
R
G
B
A
React Best Gradient Color Picker
Customizable, easy to use color and gradient picker for React.js
Install
npm i react-best-gradient-color-picker
Copied!
Customize
hidePresets
hideInputs
hideControls
hideOpacity
hideEyeDrop
hideAdvancedSliders
hideColorGuide
hideInputType
hideColorTypeBtns
hideGradientType
hideGradientAngle
hideGradientStop
hideGradientControls
Documentation/Github
NPM

react-best-gradient-color-picker

  • Customizable, easy to use color and gradient picker for React.js
  • Simply pass in an rgba or css gradient string as value and an onChange handler
  • Variety of optional tools like eye dropper, advanced color settings, and color guide
  • use the useColorPicker hook for complete control over of the picker
  • You can completly customize the UI by hiding the included elements and using the hook to build your own
  • You can also customize preset options by passing in an array of rgba colors (see custom presets below)

Install

npm install react-best-gradient-color-picker
yarn add react-best-gradient-color-picker

Basic Example

import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1)');

  return <ColorPicker value={color} onChange={setColor} />
}

Props

Name
value
width
height
hideInputs
hideOpacity
hideControls
hideColorTypeBtns
hidePresets
hideEyeDrop
hideAdvancedSliders
hideColorGuide
hideInputType
hideGradientType
hideGradientAngle
hideGradientStop
hideGradientControls
presets
Type
string
int
int
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
boolean
array
Default
'rgba(175, 51, 242, 1)'
294
294
false
false
false
false
false
false
false
false
false
false
false
false
false
['rgba(0,0,0,1)', ...]
Description
The starting color
(optional) The width of the picker
(optional) The height of the picker
(optional) hide the hex and rgba inputs
(optional) hide the opacity bar
(optional) hide the entire top row of various control btns
(optional) hide the solid/gradient buttons
(optional) hide the preset color options
(optional) hide and disable the eye dropper tool
(optional) hide the additional sliders (saturation, luminence, brightness
(optional) hide the color guide, a tool that shows color pairings
(optional) hide the input type selector, looking the type
(optional) hide the linear/circular gradient type toggle (only relevant in gradient mode)
(optional) hide the gradient angle input (only relevant in gradient mode with a linear gradient)
(optional) hide the gradient point stop input (only relevant in gradient mode)
(optional) hide the all gradient controls (the bar that appears below top controls when in gradient mode)
(optional) pass in custom preset options ['rgba()', 'rgba()', ..]

API

Name
onChange
Description
A function to update color value

useColorPicker

  • Take complete control of the picker
  • Get current state
  • Convert between color types

Basic Example

  • Initialize the hook by passing in the same color value and onChange handler
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { setSolid, setGradient } = useColorPicker(color, setColor);

  return(
    <div>
      <button onClick={setSolid}>Solid</button>
      <button onClick={setGradient}>Gradient</button>
      <ColorPicker value={color} onChange={setColor} />
    </div>
   )
}

Included Functions

Name
handleChange
setLinear
setRadial
setDegrees
setSolid
setGradient
setR
setG
setB
setA
setHue
setSaturation
setLightness
valueToHSL
valueToHSV
valueToHex
valueToCmyk
setSelectedPoint
deletePoint
addPoint
setPointLeft
getGradientObject
Arguements
value (rgba string)
degrees (num, 0 - 360)
(optional) new solid color (rgba string)
(optional) new gradient (CSS gradient)
value (num, 0 - 255)
value (num, 0 - 255)
value (num, 0 - 255)
value (num, 0 - 255)
value (num, 0 - 360)
value (num, 0 - 360)
value (num, 0 - 360)
index of point (num)
index of point (num)
position of point (num, 0 - 100)
value (num, 0 - 100)
Description
Most useful for setting color value of the selectedPoint without overwriting entire gradient string. Only pass this function a single color value, not a gradient
Change the type of gradient to linear
Change the type of gradient to radial
Change the degrees of a linear gradient
Change the pickers color mode from gradient to solid
Change the pickers color mode from solid to gradient
Update the red value of the color
Update the green value of the color
Update the blue value of the color
Update the opacity (alpha) of a color
Update the hue of a color
Update the saturation of a color
Update the lightness of a color
Get the current value in HSL
Get the current value in HSV
Get the current value in HEX
Get the current value in CMKY
Update which individual color of a gradient is in focus
Delete one of the gradients colors (points)
Add a new color to the gradient
Update the position (left) of the currently selected gradient color
Get the gradients value parsed into a key/value object (see example below)

Available State

Name
selectedPoint
isGradient
gradientType
degrees
currentLeft
rgbaArr
hslArr
Description
returns index of which color point of a gradient is currently selected
returns which mode the picker is in, solid or gradient
which gradient type is currently selected, linear or radial
current degrees of a radial gradient
the position of the selected gradient color
get the current rgba values in an array
get the current hsl values in an array

Various Customization Examples

Custom Gradient Controls

import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { gradientType, setLinear, setRadial, addPoint, deletePoint, degrees, setDegrees, setPointLeft, currentLeft, selectedPoint } = useColorPicker(color, setColor);

  return(
    <div>
      <button onClick={setLinear}>Linear</button>
      <button onClick={setRadial}>Radial</button>
      {gradientType === 'linear-gradient' && <input value={degrees} onChange={(e) => setDegrees(e.target.value)} />}
      <input value={currentLeft} onChange={(e) => setPointLeft(e.target.value)} />
      <button onClick={() => addPoint(50)}>Add Color</button>
      <button onClick={() => deletePoint(selectedPoint)}>Delete Color</button>
      <ColorPicker value={color} onChange={setColor} hideControls={true} />
    </div>
   )
}

Custom RGBA Inputs

import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { setR, setG, setB, setA, rgbaArr } = useColorPicker(color, setColor);

  return(
    <div>
      <input value={rgbaArr[0]} onChange={(e) => setR(e.target.value)} />
      <input value={rgbaArr[1]} onChange={(e) => setG(e.target.value)} />
      <input value={rgbaArr[2]} onChange={(e) => setB(e.target.value)} />
      <input value={rgbaArr[3]} onChange={(e) => setA(e.target.value)} />
      <ColorPicker value={color} onChange={setColor} hideInputs={true} />
    </div>
   )
}

Conversions

import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { valueToHSL, valueToHSV, valueToHex, valueToCmyk, rgbaArr, hslArr } = useColorPicker(color, setColor);

  const hslString = valueToHSL();
  const hsvString = valueToHSV();
  const hexString = valueToHex();
  const cmykString = valueToCmyk();
  const rgbaArray = rgbaArr;
  const hslArray = hslArr;

  return(
    <div>
      <ColorPicker value={color} onChange={setColor} />
    </div>
   )
}

Custom Presets Example

import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

const customPresets = [
  'rgba(34, 164, 65, 1)',
  'rgba(210, 18, 40, .5)',
  'rgba(90, 110, 232, 1)',
  'rgba(65, 89, 56, 1)',
  'rgba(98, 189, 243, 1)',
  'rgba(255, 210, 198, 1)',
  'rgba(94, 94, 94, 1)'
] //max 18 colors, you can pass in more but the array will be sliced to the first 18

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1');

  return <ColorPicker value={color} onChange={setColor} presets={customPresets} />
}
You may also want to provide the users recently used colors in lieu of preset options. This can be easily accomplished use the hook.
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { previousColors } = useColorPicker(color, setColor);

  return(
    <div>
      <ColorPicker value={color} onChange={setColor} presets={previousColors} />
    </div>
   )
}

Getting Value in Object Form

The picker returns the new value as a css gradient string but you may need it parsed as an object. This can easily be accomplised by using the getGradientObject function returned by the useColorPicker hook like so:
import React from 'react'
import ColorPicker, { useColorPicker } from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');
  const { getGradientObject } = useColorPicker(color, setColor);
  const gradientObject = getGradientObject();

  // example value
  // {
  //   "isGradient": true,
  //   "gradientType": "linear-gradient",
  //   "degrees": "40deg",
  //   "colors": [
  //       {
  //           "value": "rgba(27,107,235,1)",
  //           "left": 0
  //       },
  //       {
  //           "value": "rgba(25,245,157,1)",
  //           "left": 100
  //       }
  //     ]
  // }

  return(
    <div>
      <ColorPicker value={color} onChange={setColor} presets={previousColors} />
    </div>
   )
}

LEGACY V1 - Manual Control - Customizing UI

This still works, although most functions are available through the useColorPicker hook, if there is something you need that is not available you could use the below methods to create your desired functionality.
The state of the picker is determined by parsing the value string. You can update props like colorType (solid/gradient), gradientType (linear/radial), gradientDegrees, hex, rgba, opacity and hue simply by updating the value you are passing into the component. Let's say you want to change the colorType from gradient to solid
import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)');

  const setSolid = () => {
    setColor('rgba(255,255,255,1)') //color could be any rgba value
  }

  return(
    <div>
      <button onClick={setSolid}>Solid</button>
      <ColorPicker value={color} onChange={setColor} />
    </div>
   )
}
The same can be done in inverse to change colorType from solid to gradient
const setGradient = () => {
  setColor('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)')
}
Example toggling gradientType
const setLinear = () => {
  setColor('linear-gradient(90deg, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)')
}

const setRadial = () => {
  setColor('radial-gradient(circle, rgba(96,93,93,1) 0%, rgba(255,255,255,1) 100%)')
}

License

Code released under the MIT license.