ColorPicker and Colorboard JS - Color Selection UI controls

The ColorPicker and Colorboard controls significantly simplify color handling in the application.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS


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.

Easily embeddable

It is easy to embed Webix Colorpicker into Form or Layout widgets, which allows you to pick the colors quickly.

Colorpicker formats

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

Color Selector allows selecting an arbitrary color. Can be used standalone or as a popup of ColorPicker.

Click tabs to see all types.