Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Colorpicker and go into deep dive on its functionality.

How to start with DHTMLX Colorpicker

In this section you can find out the ways of Colorpicker initialization and localization, and learn how to integrate Colorpicker into your applications.

Initialization and localization

TopicDescription
Basic initializationLearn how to initialize Colorpicker (Example)
Colorpicker inside PopupLearn how to initialize Colorpicker in a popup (Example)
LocalizationLearn how to localize Colorpicker (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Colorpicker with React (Demo)
Angular integrationLearn how to use DHTMLX Colorpicker with Angular (Demo)
Vue integrationLearn how to use DHTMLX Colorpicker with Vue.js (Demo)

How to configure Colorpicker

In this section you will find out how to configure the modes of displaying Colorpicker.

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

How to configure palette

In this section you will find out how to configure and customize palette.

TopicDescription
Hiding gray shadesLearn how to hide gray shades at the top of the palette (Example)
Displaying custom colorsLearn how to display a list of custom colors in the bottom part of Colorpicker
Configuring custom paletteLearn how to display Colorpicker with a custom palette (Example)

How to customize Colorpicker and change its size

In this section you can learn how to customize Colorpicker and change its width.

TopicDescription
Width of ColorpickerLearn how to set the necessary width of Colorpicker
Styling (custom CSS)Learn how to change the look and feel of Colorpicker (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Colorpicker

In this section you will find out how to set/get selected color, how to set/get custom colors which are displayed at the bottom of Colorpicker, how to change the current mode of Colorpicker, and more.

TopicDescription
Setting selection to a colorLearn how to select a certain color in Colorpicker (Example)
Getting selected colorLearn how to get the code of a selected color
Setting custom colorsLearn how to display custom colors in the bottom part of Colorpicker (Example)
Getting custom colorsLearn how to return the codes of selected custom colors
Changing Colorpicker modeLearn how to change the current mode of Colorpicker (Example)
Getting Colorpicker modeLearn how to get the current mode of displaying Colorpicker
Setting focusLearn how to set focus on the specified value (Example)

How to work with Colorpicker events

This section explains how to work with Colorpicker events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Colorpicker events (Example)

API reference

In this section you can find out corresponding references of Colorpicker API.

TopicDescription
Colorpicker methodsCheck the list of Colorpicker methods
Colorpicker eventsCheck the list of Colorpicker events
Colorpicker propertiesCheck the list of Colorpicker properties

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Colorpicker.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

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