< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Color Picker

An intuitive React color picker component from the leading-edge Suite UI library.
Enjoy a wide color palette and unlimited customization opportunities.

Product Features

  • Cross-browser compatibility
  • 2 modes: inline and popup color picker
  • HEX color format
  • Ability to manage custom colors
  • Custom color palette
  • Accessibility support
  • Ability to add gray shades to a palette
  • Flexible JavaScript API
  • Full customization
  • Smooth integration with dhtmlxForm and dhtmlxPopup
  • Support for localization

Live React Color Picker Example

Our React color picker can be easily integrated into a popup.

How It Works

5 Quick Steps to Integrate ColorPicker with React
Create a ColorPicker.js file and import files and styles of ColorPicker
Create ColorPicker class, which extends the Component class
Add an empty container for ColorPicker with the reference to it in the el property using the ref property
When the component is initialized, initialize ColorPicker and attach the instance of Calendar to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Why Choose a React Color Picker by DHTMLX?

React color picker with an extending color palette

You can add any element you want: a stand-alone color picker, a color palette or combine both of them. Extend users’ choices equipping your palette with a section of gray shades and including custom-made colors. DHTMLX ColorPicker supports colors in Hex file format.

Fully-customized React color picker component

Modify a ColorPicker widget by adding new CSS classes. You can adapt any element of the color picker and palette to suit your web environment: change background colors, specify border width, set palette shapes, etc. Localization is supported through configuring a multi-language interface.

Few-steps integration with Suite UI controls

A default DHTMLX color picker has a selection box with a slider and text field for recording Hex codes. You can use our React color picker component as an inline widget or add it to a popup window. Besides, you can integrate the component in an input field of dhtmlxForm.

Vue.js and Angular color picker

Apart from React, our simple color picker can be used with today’s most popular web frameworks like Vue.js and Angular. Download a free 30-day trial and look how Suite UI can work with your project. Use our integrations guides and samples to create a color picker best suited to your needs.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxColorPicker integration into your app? Contact us