Color Presets

The ColorPalette provides a set of predefined color palettes such as office(default), basic, and apex.

The following example demonstrates all predefined color presets for the ColorPalette.

@Component({
    selector: 'my-app',
    template: `
        <div class='row'>
            <div *ngFor="let palette of palettes" class="col-md-3 box">
                <h4>{{palette.toUpperCase()}}</h4>
                <kendo-colorpalette [tileSize]="16" palette="{{palette}}"></kendo-colorpalette>
            </div>
        </div>
    `,
    styles: [`
        .row { margin-bottom: 15px; }
        h4 {
            margin-bottom: 1em;
            font-size: 12px;
            line-height: 1em;
            font-weight: bold;
            text-transform: uppercase;
        }
    `]
})
export class AppComponent {
  public palettes = ['office', 'apex', 'austin', 'clarity', 'slipstream', 'metro', 'flow', 'hardcover', 'trek', 'verve', 'basic', 'monochrome'];
}

In this article