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 ColorPicker, ColorPalette, and the basics of CSS color values.
Creating a ColorPicker
The 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:
```html<!DOCTYPE html><html> <head> <metacharset="utf-8"> <title>Color Picker</title> <linkrel="stylesheet"href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css"> <scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script> <scriptsrc="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script> <style> body {font-family: helvetica;} </style> </head> <body> <inputid="picker"type="color"> <script> $(document).ready(function(){ $('#picker').kendoColorPicker(); }); </script> </body></html>```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 enter or 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 opacity option.
Here is an example of the ColorPicker with all of its defaults changed:
```js$('#picker').kendoColorPicker({ clearButton: true, buttons: false, opacity: true, preview: false});```Understanding CSS Color Notation
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.
Creating a Color Palette
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:
```js$('#picker').kendoColorPicker({ palette: 'basic'});```
```js$('#picker').kendoColorPicker({ palette: 'websafe'});```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:
```html<divid="palette"></div><script> $(document).ready(function(){ $('#palette').kendoColorPalette({ columns: 4, tileSize: 32, palette: [ '#f9d5e5', '#eeac99', '#e06377', '#c83349', '#5b9aa0', '#d6d4e0', '#b8a9c9', '#622569' ] }); });</script>```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.
Conclusion
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 Editor component.
Try Out Kendo UI for Yourself
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.
Angular, React, and Vue Versions
Looking for UI components to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.