Make it easy for your users to choose between or preview colors with the Kendo UI ColorPicker. See how easy it is to implement and customize in your app.
In the last episode, we discussed three different date and time pickers. In this episode, we will discuss the Kendo UI
ColorPicker component. The
ColorPicker is a widget that lets you choose colors from a dropdown. The dropdown can be an HSV (hue, saturation, value) picker or a palette of predefined colors. Using a color picker is advantageous because it relieves the end user of having to know color codes or names.
Your user may need a color picker, for example, in apps where differently colored products can be previewed. This is common with clothing and cars. Another use for a color picker is as a tool in an image editor or text editor. In the following lesson, you will learn how to create a Kendo UI
ColorPalette, and the basics of CSS color values.
ColorPicker by default will show the selected color in the dropdown's label and an HSV color picker in the dropdown's popup. The popup contains the color picker which is a tile of one color in all its shades that you can click on to select a color. Above the picker is a preview of the selected color and an input field to change the color using any CSS supported notation. Below the picker is a slider to change the color in the picker. The colors include red, yellow, green, cyan, blue, and magenta. And at the very bottom of the popup is an apply button to save the changes and a cancel button which reverts the changes to the last saved color.
This example creates a basic color picker using the Bootstrap theme:
The apply and cancel buttons can have their text changed by setting the
messages option. The buttons can be removed altogether by setting the
buttons option to false. In this case, when the user clicks anywhere off of the popup or presses the
Esc keys, the changes will be saved and the popup will close. You can add a button to clear the color by setting
clearButton to true. This makes the selected color equal to
null. The input to enter the color values and the preview can be removed from the header of the popup with
preview option. This will also remove the preview color from the dropdown button label. Last, a slider for the opacity can be added to the footer of the popup with the
Here is an example of the
ColorPicker with all of its defaults changed:
If you want to enter colors into the color picker or define them in a palette, you will need to understand how colors are defined in CSS. Some common ways to define a color is using a name, HEX, RGB, or RGBA value. Names come from a predefined list of color names. The HEX value of a color is a hexadecimal number that has the form
#rrggbb. Hexadecimal is a number system containing 16 values. The
rr portion of the number represents the red value of the color,
gg is the green value, and
bb is the blue value. The numbers 0-9 make up the first ten values and the letters A-F make up the last six values of hexadecimal notation, so each part can take on a value between 00 and ff. The HEX value can also be written in shorthand form as
#rgb with each part designated a value between 0 and f.
A color specified as an RGB value has the form
rgb(red, green, blue). The value of each parameter can be from 0 to 255. A value of 0 is essentially no color and a value of 255 is the highest intensity of color. For example,
rgb(255, 0, 0) is red,
rgb(0, 255, 0) is green and
rgb(0, 0, 255) is blue. Also
rgb(0, 0, 0) is black and
rgb(255, 255, 255) is white. The RGBA value has the form
rgba(red, green, blue, alpha). The
alpha parameter is the opacity of the color. It can be a number from 0 to 1, 0 being invisible and 1 being completely opaque. This means that the background layer the color sits on will show through when less opacity is applied.
You also have the option to pick colors from a color palette. The color palette consists of square tiles of each color. You can use a built-in color palette or define a list of colors. One of the built-in color palettes is
basic which consists of 20 colors. This comes in handy if you want to provide some default values that can be used to select a font color or background color. The other built-in palette is
websafe which has 216 colors. Web-safe colors are colors that are guaranteed to be displayed consistently across browsers and devices. If you are building an image editing app, providing a web safe color palette is a good addition to an HSV color picker. Here is what each palette looks like:
If you want to define your own color palette, you can use either the color name or a HEX value. If you would like to use a standalone color palette instead of the dropdown, you can use the
ColorPalette widget. This makes the tiles visible on the page for selection. This is common in apps where users need to click on the tile and see the color update some image or other property on the page. For example, each tile can represent a swatch of fabric that updates the color of a piece of furniture. Here is an example of a standalone palette:
Notice that we use a
div element to create the palette instead of an
input element. We also customized the look of the palette by setting it to four tiles wide and making each tile 32 square pixels. Alternatively, you can specify the width and the height of each tile individually.
You have seen how to use the
ColorPicker to create a dropdown of an HSV color picker and a color palette. You also used the
ColorPalette to create a standalone palette.
One of the uses I mentioned for the
ColorPicker is in a text editor. However, you do not need to create your own text editor if you use the Kendo UI
Editor component. The
Editor is a WYSIWYG interface that lets you create rich text content. It includes tools to format text, like a color picker to change font color, as well as custom tools you can create yourself. In the next episode, we will go over the features of the
Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required