Custom ColorPicker

The popup element (palette or gradient) can be customized according to the user's needs.

Customize the Popup Palette

The ColorPicker provides options for the user to specify its rendering, columns, and tile sizes, and to customize the color formats of its palette.

@Component({
    selector: 'my-app',
    template: `
        <div>
            <strong>Selected color in {{ picker.format }}: {{ color }}</strong>
        </div>
        <kendo-colorpicker 
            #picker
            [view]="'palette'"
            [format]="'hex'"
            [paletteSettings]="settings"
            [(value)]="color"
        >
        </kendo-colorpicker>
    `
   })
export class AppComponent {
    public color: string = '#f9d9ab';

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

Customize the Popup Gradient

The ColorPicker provides the option for the user to specify whether the GradientComponent opacity slider will be shown. When the opacity slider is enabled, only rgba output format is available. Otherwise, both rgba and hex are present as options.

@Component({
    selector: 'my-app',
    template: `
        <div>
            <strong>Selected color in {{ picker.format }}: {{ color }}</strong>
        </div>
        <kendo-colorpicker 
            #picker
            [view]="'gradient'"
            [format]="'hex'"
            [gradientSettings]="settings"
            [(value)]="color"
        >
        </kendo-colorpicker>
    `
   })
export class AppComponent {
    public color: string = '#f9d9ab';

    public settings: GradientSettings = {
        opacity: false
    }
}

Displaying Kendo UI Icons

To display an existing icon in the Kendo UI theme in the ColorPicker button, provide only the name of the icon without the k-icon class and the k-i- prefix to the icon property of the component. For example, instead of k-icon k-i-edit-tools, simply provide edit-tools.

@Component({
    selector: 'my-app',
    template: `
        <kendo-colorpicker icon="edit-tools"></kendo-colorpicker>
    `
   })
export class AppComponent { }

Displaying Custom Icons

To display a custom icon in the ColorPicker button, provide the full icon CSS class name to the iconClass property of the component.

@Component({
    selector: 'my-app',
    template: `
        <kendo-colorpicker iconClass="k-icon k-i-edit-tools"></kendo-colorpicker>
    `
   })
export class AppComponent { }

Toggling the Open State Programmatically

To programmatically open or close the ColorPicker, use its toggle method.

If you use toggle, the open and close events of the component are not triggered.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <button class="k-button" (click)="picker.toggle(true)">Open</button>
            <button class="k-button" (click)="picker.toggle(false)">Close</button>
        </div>
        <kendo-colorpicker
            #picker
            (close)="$event.preventDefault()"
        >
        </kendo-colorpicker>
    `
})
export class AppComponent { }

In this article