< Try Suite 6.5 with TypeScript support, grouping TreeGrid data, and columns’ drag-n-drop in Grid and TreeGrid

JavaScript Color Picker

A beautiful Material design color picker in pure JavaScript equipped with a rich color palette and boundless customization options.
Part of the state-of-the-art Suite UI library.

Download
View more demos
Compatible with:
Vue.js Vue.js
React React
Angular Angular

Product Features

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

Live JavaScript Color Picker Example

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

View more demos

How to Create a Color Picker in HTML

Take 5 Simple Steps to Build a JavaScript Color Picker:
1
Create an HTML file
2
Include the js color picker source files in the header
3
Add a container with an id - e.g. “colorpicker_container”
4
Initialize the widget with the dhx.ColorPicker object constructor
5
Optionally, you can specify an initially selected color
To learn more check documentation

Why Choose a JavaScript Color Picker by DHTMLX?

JavaScript Color Picker with a Rich Color Palette

Our intuitive HTML color picker can be displayed all alone, together with a color palette or even as a color palette without a picker. The component handles colors in the Hex format. In addition to the default colors, you can equip your palette with a row of gray shades and even redefine the whole palette by including brand-new colors.

Customize CSS of your Color Picker

Our Material design color picker can be easily customized to meet the requirements of your web app. You can change every aspect of the color picker and palette: border and background colors, border radius, etc. The tool also provides multi-language support, so that you can apply any locale to the labels and tooltips.

Easy integration with other controls

Our HTML5 color picker displays a color selection box with a slider and text field for entering Hex values. The component can be created either as an inline color picker or a popup dialog box. You can also integrate it in an input field of dhtmlxForm.

Vue, Angular, and React Color Picker

As a part of the Suite library, dhtmlxColorPicker can be integrated into web apps based on the most popular frameworks like Angular, Vue.js, and React. Integration guides and samples will help you to build the color picker tool according to your needs. Download a free 30-day trial version of Suite and test it in your projects.

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:

Documentation
Support
Forum
Samples

Other Suite Components

Calendar
Chart
ColorPicker
ComboBox
DataView
DatePicker
Form
Grid
Layout
List
Menu
Message
Popup
Ribbon
Sidebar
Slider
Tabbar
TimePicker
Toolbar
Tree
TreeGrid
Window
demo-screenshot

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

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Download

Need help with dhtmlxColorPicker integration into your app? Contact us