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.

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.

Copy Code@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.

Copy Code@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"
        ]
    };
}

Suggested Links

• API Reference of the ColorPicker