Features

This page collects the guides and API references that help you start with DHTMLX Colorpicker and explore its functionality in depth.

How to start with DHTMLX Colorpicker

This section explains how to initialize and localize Colorpicker, and how to integrate it into your applications.

Initialization and localization

Topic	Description
Basic initialization	Learn how to initialize Colorpicker (Example)
Colorpicker inside Popup	Learn how to initialize Colorpicker in a popup (Example)
Localization	Learn how to localize Colorpicker (Example)

Integration

Topic	Description
Backend integration	Learn how to connect DHTMLX Suite to a backend (Demo)
Optimus	Learn how to use the DHTMLX Optimus framework to create DHTMLX-based apps (the recommended framework for apps built with Suite components)
React integration	Learn how to use DHTMLX Colorpicker with React (Demo)
Angular integration	Learn how to use DHTMLX Colorpicker with Angular (Demo)
Vue integration	Learn how to use DHTMLX Colorpicker with Vue.js (Demo)

How to configure Colorpicker

This section explains how to configure Colorpicker display modes.

Topic	Description
Setting Colorpicker mode ("palette", "picker")	Learn how to configure the Colorpicker display mode (Example)
Displaying the picker only	Learn how to hide the palette and display the picker only (Example)
Displaying the palette only	Learn how to hide the panel with custom colors (Example)

How to configure palette

This section explains how to configure and customize the palette.

Topic	Description
Hiding gray shades	Learn how to hide gray shades at the top of the palette (Example)
Displaying custom colors	Learn how to display a list of custom colors at the bottom of Colorpicker
Configuring custom palette	Learn how to display Colorpicker with a custom palette (Example)

How to customize Colorpicker and change its size

This section explains how to customize Colorpicker and change its width.

Topic	Description
Width of Colorpicker	Learn how to change the Colorpicker width
Styling (custom CSS)	Learn how to change the look and feel of Colorpicker (Example)
List of CSS classes	The set of CSS classes that the DHTMLX library provides

How to work with Colorpicker

This section explains how to set and get the selected color, how to manage the custom colors at the bottom of Colorpicker, and how to change the current Colorpicker mode.

Topic	Description
Setting selection to a color	Learn how to select a color in Colorpicker (Example)
Getting selected color	Learn how to get the code of a selected color
Setting custom colors	Learn how to display custom colors at the bottom of Colorpicker (Example)
Getting custom colors	Learn how to get the codes of the selected custom colors
Changing Colorpicker mode	Learn how to change the current Colorpicker mode (Example)
Getting Colorpicker mode	Learn how to get the current Colorpicker mode
Setting focus	Learn how to set focus on a color (Example)

How to work with Colorpicker events

This section explains how to work with Colorpicker events.

Topic	Description
Event basic rules	Learn basic rules on how to work with events
Event handling	Learn how to attach, detach, or call the Colorpicker events (Example)

API reference

This section links to the Colorpicker API reference.

Topic	Description
Colorpicker methods	Check the list of Colorpicker methods
Colorpicker events	Check the list of Colorpicker events
Colorpicker properties	Check the list of Colorpicker properties

Common functionality

This section covers common library features that help when you work with Colorpicker.

Topic	Description
Touch support	Learn how to work with touch support
TypeScript support	Learn how to work with TypeScript
AwaitRedraw	Learn how to run code after the component renders

Any questions left?

info

Do you need more functionality? Feel free to share your suggestions in the comments below!