How to Create a Color Picker in ReactJS?

In this article, we are going to explore how to create and use a Color Picker in ReactJS. A Color Picker can be defined as a graphical user interface widget that is usually found within some graphics software or used online to select/choose colors and sometimes to create new color themes as well.

React is a free and open-source front-end JavaScript Library that is used for building user interfaces or UI components. It is maintained by Facebook and a community of individual contributors who keep it updated.


We can run through the following steps to create a color picker −

  • First we would need to use the react-color-palette package.

  • This package would help us with all the basic requirements used for creating the color picker.

  • Once imported we can use its functions to choose the colors.


  • Creating a React Application
npx create-react-app myApp
  • Installing the react-color-palette package
npm install react-color-palette


In the below example, we are creating a Color Picket with the help of the react-color-palette package in ReactJS.

# App.js

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";
export default function ColorPickertp(){
   const [color, setColor] = useColor("hex", "#121212");
   return (
         <h1>Welcome To Tutorials Point</h1>
         <ColorPicker width={456} height={228}
            onChange={setColor} hideHSV dark />;


Use npm start to start the above application