ColorPalette Overview

The ColorPalette renders colors by using sets of predefined colors (color presets) or by implementing a custom color palette.

The component is independently used by the Kendo UI ColorPicker for Angular and can be directly added to the page instead of rendered in a popup.

Basic Usage

The following example demonstrates the ColorPalette in action.

@Component({
    selector: 'my-app',
    template: `
    <div class="example">
        <div class="img" [ngStyle]="{ 'background-color': selected }"></div>
        <div class="description">
            <h1>Comfy T-shirt with a cut-away neckline</h1>
            <p class="price">$19.99</p>
            <span>incl. VAT</span>

            <p class="selected-color">{{ colorNames[selected] }}</p>
            <kendo-colorpalette
                [palette]="palette"
                [value]="selected"
                [tileSize]="40"
                (valueChange)="onChange($event)">
            </kendo-colorpalette>
            <button class="k-button">Add to cart</button>
        </div>
    </div>
    `,
    styles: [`
        .example {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin: 0 auto;
            width: 700px;
            color: #44403f;
        }
        .k-colorpalette .k-item { border-radius: 50%; }
        .description {
            width: 340px;
            margin-top: 35px;
            align-self: flex-start;
        }
        h1 { font-size: 32px; font-weight: bold; margin-bottom: 20px; }
        p {
            font-size: 20px;
            letter-spacing: .025em;
            margin-bottom: 0;
        }
        .description span {
            color: #8e8682;
            display: block;
            font-size: 13px;
        }
        .selected-color {
            margin: 40px 0 10px 0;
        }
        .img {
            width: 100%;
            height: 480px;
            margin-right: 10px;
            background-size: cover;
            background-image: url('https://www.telerik.com/kendo-angular-ui-develop/components/inputs/colorpalette/assets/demo-img.png');
        }
        button {
            display: block;
            background: transparent;
            color: #44403f;
            border-color: currentColor;
            width: 200px;
            margin-top: 40px;
            padding: 8px;
            font-size: 20px;
        }
        button:hover {
            background: #0083FF;
            color: #fff;
            border-color: currentColor;
        }
    `]
})

class AppComponent {
    public selected = '#a21616';
    public palette: Array<string> = [ '#37399b', '#a81c85', '#0ab3cc', '#2f7d20', '#a21616' ];

    public colorNames: any = {
        '#37399b': 'Navy blue',
        '#a81c85': 'Violet',
        '#0ab3cc': 'Light blue',
        '#2f7d20': 'Forest green',
        '#a21616': 'Dark red'
    }

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

Functionality and Features

Events

The following example demonstrates the basic valueChange event of the ColorPalette.

@Component({
    selector: 'my-app',
    template: `
        <h4>Selected color: <span>{{ color }}</span></h4>
        <kendo-colorpalette (valueChange)="onChange($event)" [value]="color"></kendo-colorpalette>
    `,
    styles: [`
        h4 {
            margin-bottom: 1em;
            font-size: 12px;
            line-height: 1em;
            font-weight: bold;
            text-transform: uppercase;
        }
        h4 span { text-transform: lowercase; }
    `]
   })
export class AppComponent {
    public color: string = '#548dd4';

    public customPalette: Array<string> = [
        "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
        "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
        "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
        "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
        "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
    ]

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

In this article