Color Picker and Colorboard - JS Color Selection UI controls

The ColorPicker and Colorboard controls significantly simplify the work with colors. ColorPicker has the input field that displays the currently selected color along with its hex color code. On clicking the input field, a colorboard with a set of available colors appears.

ColorPicker and Colorboard JS Overview

You can change the size of the palette and define your own color set. By default, colors are presented in the rainbow-like manner, but you can always define your own color set. Adding these controls to a web application helps you to create a user-friendly interface for color manipulations when working with styles.

Way of Color PresentationView Demo

By default, Colorboard contains only the color palette. With templates, you can use custom HTML code for setting the way of how color is presented in Colorboard. For example, you can add a hex code to each color sample.

javascript colorpicker
View demo

Easily Embeddable

It is possible to embed Webix Colorpicker to any library widget with ease, which will allow you to select a color in a quick way.

Colorpicker JS Formats

Colorpicker handles RGB, HSL, and hex formats resembling the formats of typical graphic editors.

Add Your Own ColorsView Demo

If the set of available color samples isn't enough, you can define your own colors for the Colorboard. All you have to do is to set an array consisting of hex codes of the colors that you want to see in the palette.

Browsers Compatibility

Webix Colorpicker supports almost all modern desktop and mobile web browsers like Internet Explorer 8+, Firefox, Safari, Opera, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari (IPhone, IPad). The widget automatically detects the type of browser and adjusts its internal behavior for optimal rendering.

Ready for Touch Devices

Mobile apps created with Webix Colorpicker run smoothly on all popular touch devices.

Windows and Popups