Custom ColorPalette

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

The following example demonstrates how to customize the rendering of the ColorPalette.

@Component({
    selector: 'my-app',
    template: `
        <h4>Selected value in {{ palette.format.toUpperCase() }} format: <span>{{ palette.value }}</span></h4>
        <kendo-colorpalette #palette
            [columns]="5"
            [tileSize]="40"
            format="rgba"
            [palette]="'basic'"
            value="#22b14c">
        </kendo-colorpalette>
    `,
    styles: [`
        h4 {
            margin-bottom: 1em;
            font-size: 12px;
            line-height: 1em;
            font-weight: bold;
            text-transform: uppercase;
        }
        h4 span { text-transform: lowercase; }
    `]
})

class AppComponent {}

In this article