Views

The ColorPicker provides options for configuring its popup view and for implementing and customizing combined views.

Getting Started

You can configure the ColorPicker to render either a GradientComponent or a PaletteComponent in its popup. To choose between the two, provide either gradient or palette to the view input property of the component. By default, the gradient view will be used.

Example
View Source
Edit In Stackblitz  
Change Theme:

Implementing Combined Views

To set a combined view and have both the ColorPalette and ColorGradient rendered in the ColorPicker popup, set the view property to combo.

@Component({
    selector: 'my-app',
    template: `
        <div [style.color]="picker.value">{{ picker.value }}</div>
        <kendo-colorpicker #picker [view]="'combo'" [value]="selectedColor"></kendo-colorpicker>
    `
   })
export class AppComponent {
    public selectedColor: string = '#f9d9ab';
}

Customizing the Combined Views

The ColorPicker enables the user to customize the combo view of its popup.

@Component({
    selector: 'my-app',
    template: `
        <div [style.color]="picker.value">{{ picker.value }}</div>
        <kendo-colorpicker
            [format]="'hex'"
            [paletteSettings]="paletteSettings"
            [gradientSettings]="{ opacity: false }"
            #picker
            [view]="'combo'"
            [value]="selectedColor"
        >
        </kendo-colorpicker>
    `
   })
export class AppComponent {
    public selectedColor: string = '#f9d9ab';

    public paletteSettings: PaletteSettings = {
        tileSize: 24,
        columns: 8,
        palette: [
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        ]
    };
}

In this article

Not finding the help you need?