Components / Inputs / ColorPicker

ColorPicker Overview

The ColorPicker enables the user to select and submit color values.

The ColorPicker is designed to replace the <input type="color"> HTML5 tag which is not widely supported in browsers.

Basic Usage

The following example demonstrates the ColorPicker with the palette view in action.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h4>{{ kendoColors[selected] }}</h4>
        <div class="example" [ngStyle]="{ 'background-color': selected }">
            <div class="kendoka"></div>
        </div>
        <div class="wrapper">
            <kendo-colorpalette
                [palette]="palette"
                [value]="selected"
                [tileSize]="30"
                (valueChange)="onChange($event)"
            >
            </kendo-colorpalette>
            <kendo-colorpicker
                [view]="'palette'"
                [format]="'hex'"
                [paletteSettings]="settings"
                [value]="selected"
                (valueChange)="onChange($event)"
            >
            </kendo-colorpicker>
        </div>
    `,
    styles: [`
        h4 { text-align: center; }
        .example { width: 500px; height: 490px; margin: 0 auto; }
        .wrapper { position: relative; width: 500px; height: 60px; text-align: center; }
        .k-colorpicker { position: absolute; right: 0 }
        .kendoka {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background-size: cover;
            background-image: url('https://www.telerik.com/kendo-angular-ui-develop/components/inputs/colorpicker/assets/kendoka.png');
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public selected = '#fe413b';
    public palette: Array<string> = ['#fe413b', '#4eaec5', '#ff5500', '#42b683'];

    public kendoColors: any = {
        '#fe413b': 'Kendo UI for Angular',
        '#4eaec5': 'KendoReact',
        '#ff5500': 'Kendo UI for jQuery',
        '#42b683': 'Kendo UI for Vue'
    };

    public settings: PaletteSettings = {
        palette: this.palette,
        tileSize: 30
    };

    public onChange(color: string): void {
        this.selected = color;
    }
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, InputsModule]
})
export class AppModule { }


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Configure the ColorPicker View

The ColorPicker can be configured to show 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.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <div>
                <input type="radio" name="view" value="gradient" class="k-radio" id="gradient" [(ngModel)]="view">
                <label class="k-radio-label" for="gradient">Gradient</label>
            </div>
            <div>
                <input type="radio" name="view" value="palette" class="k-radio" id="palette" [(ngModel)]="view">
                <label class="k-radio-label" for="palette">Palette</label>
            </div>
        </div>
        <div>
            <kendo-colorpicker
                [view]="view"
                [value]="value"
            >
            </kendo-colorpicker>
        </div>
    `
})
export class AppComponent {
    public view: string = 'gradient';
    public value: string = '#548235';
}

Functionality and Features

Events

The following example demonstrates the basic valueChange, focus, blur, open, and close events of the ColorPicker.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <div>
                <input type="checkbox" class="k-checkbox" id="open-controller" [(ngModel)]="preventOpen">
                <label class="k-checkbox-label" for="open-controller">Prevent Opening</label>
            </div>
            <div>
                <input type="checkbox" class="k-checkbox" id="close-controller" [(ngModel)]="preventClose">
                <label class="k-checkbox-label" for="close-controller">Prevent Closing</label>
            </div>
        </div>
        <div>
            <kendo-colorpicker
                (valueChange)="log('valueChange', $event)"
                (open)="handlePreventableEvent('open', $event, preventOpen)"
                (close)="handlePreventableEvent('close', $event, preventClose)"
                (focus)="log('focus', $event)"
                (blur)="log('blur', $event)"
            >
            </kendo-colorpicker>
        </div>
    `
})
export class AppComponent {
    public preventOpen: boolean;
    public preventClose: boolean;

    public handlePreventableEvent(eventName: string, eventArgs: Event, shouldPrevent: boolean): void {
        if (shouldPrevent) {
            eventArgs.preventDefault();
            console.log(`${eventName} prevented`);

            return;
        }

        console.log(eventName);
    }

    public log(eventName: string, eventArgs: any): void {
        console.log(eventName, eventArgs);
    };
}

In this article