ColorPicker has an input field that displays the currently selected color alongside with its hex code. On clicking the input field, a colorboard with a set of available colors appears. You can change the size of this palette and define a personal set of colors. By default colors are presented in the rainbow-like manner. Adding this tools to a web application helps you create a user-friendly interface for color manipulations, for instance, when working with styles.
Way of color presentation
By default Colorboard contains only the color palette. With templates, you can use custom HTML markup for setting the way of how colors are presented in Colorboard. For example, you can add a hex code to each color sample.
This demo shows the Colorboard with the hex codes for each color.
It is easy to embed Webix Colorpicker into Form or Layout widgets, which allows you to pick the colors quickly.
Colorpicker handles RGB, HSL, and hex formats resembling the formats of typical graphic editors.
Add custom colors
If the set of available color samples doesn't suit you, you can define custom colors and show them in the Colorboard. All you have to do is to set an array that contains hex codes of the colors that you want to see in the palette.
This example demonstrates the Colorboard that contains a custom color set.
Color Selector allows selecting an arbitrary color. Can be used standalone or as a popup of ColorPicker.
Click tabs to see all types.