Search results

Customize ColorPicker

Custom palette

By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the presetColors property. To customize the color palette, add a custom class to palette tiles using BeforeTileRender event.

The following sample demonstrates the above functionalities.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component } from '@angular/core';
import { PaletteTileEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
import { addClass } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `<div id="preview"></div>
               <h4>Select Color</h4>
               <input ejs-colorpicker type="color" id="element" value="#ba68c8" mode="Palette" [columns]="colCount" [inline]="true" [modeSwitcher]="false" [showButtons]="false" [presetColors]="customColors" (beforeTileRender)="tileRender($event)" (change)="onChange($event)" />`
})

export class AppComponent {
        public tileRender(args: PaletteTileEventArgs): void {
            addClass([args.element], ['e-icons', 'e-custom-tile']);
        }

        // To specify number of columns to be rendered.
        public colCount: number = 4;

        // Triggers while selecting colors from palette.
        public onChange(args: ColorPickerEventArgs): void {
            document.getElementById('preview').style.backgroundColor = args.currentValue.hex;
        }

        // Triggers before rendering each palette tile.
        public customColors: { [key: string]: string[] } = {
                'custom1': ['#ef9a9a', '#e57373', '#ef5350',
                        '#f44336', '#f48fb1', '#f06292',
                        '#ec407a', '#e91e63', '#ce93d8',
                        '#ba68c8', '#ab47bc', '#9c27b0',
                        '#b39ddb', '#9575cd', '#7e57c2', '#673AB7'],
                'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5',
                        '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3',
                        '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',
                        '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],
                'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688',
                        '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50',
                        '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',
                        '#DCE775', '#D4E157', '#CDDC39']
        };

        ngOnInit(): void {
            (document.getElementById('preview') as HTMLElement).style.backgroundColor = "#ba68c8"
        }
 }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

#preview {
  border: 1px solid;
  background-color: #ba68c8;
  height: 40px;
  width: 100%;
}

/* Tile customization styles */
#element+.e-container {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}


#element+.e-container .e-custom-palette.e-palette-group {
  height: 182px;
}

#element+.e-container .e-palette .e-custom-tile {
  border: 0;
  color: #fff;
  height: 36px;
  font-size: 18px;
  width: 36px;
  line-height: 36px;
  border-radius: 50%;
  margin: 2px 5px;
}

/* Selected state icon */
#element+.e-container .e-palette .e-custom-tile.e-selected::before {
  content: '\e933';
}

#element+.e-container .e-palette .e-custom-tile.e-selected {
  outline: none;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}

Hide input area from picker

By default, the input area will be rendered in ColorPicker. To hide the input area from it, add e-hide-value class to ColorPicker using the cssClass property.

In the following sample, the ColorPicker is rendered without input area.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<h4>Choose Color</h4>
               <!-- To hide the value area. -->
               <input ejs-colorpicker type="color" id="element" cssClass="e-hide-value" [modeSwitcher]="false" />`
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Custom handle

Color picker handle shape and UI can be customized. Here, we have customized the handle as svg icon. The same way you can customize the handle based on your requirement.

The following sample show the customized color picker handle.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component } from '@angular/core';
import { OpenEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    selector: 'app-root',
    template: `<h4>Choose Color</h4>
               <!-- custom picker -->
               <input ejs-colorpicker type="color" id="element" value="#344aae" cssClass="e-custom-picker" [modeSwitcher]="false" (open)="onOpen($event)" />`
})

export class AppComponent {
    onOpen(args: OpenEventArgs): void {
        args.element.querySelector('.e-handler').classList.add('e-icons');
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

/* To hide the handle balloon preview */
.e-color-picker-tooltip.e-popup.e-popup-open {
  display: none;
}

/* Handle customization styles */
.e-custom-picker .e-container .e-hsv-container .e-handler {
  background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE2LDYgMTAsNiAxMCwwIDYsMCA2LDYgMCw2IDAsMTAgNiwxMCA2LDE2IDEwLDE2IDEwLDEwIDE2LDEwIAkiLz4KPC9nPgo8cGF0aCBkPSJNMTAsNlYwSDZ2NkgwdjRoNnY2aDR2LTZoNlY2SDEweiBNMTUsOUg5djZIN1Y5SDFWN2g2VjFoMnY2aDZWOXoiLz4KPC9zdmc+Cg==');
  font-size: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border: none;
  box-shadow: none;
  width: 16px;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}

Custom primary button

By default, the applied color will be updated in primary button of the color picker. You can customize that as icon.

In the following sample, the picker icon is added to primary button and using change event the selected color will be updated in bottom portion of the icon.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
import { Component, ViewChild } from '@angular/core';
import { addClass } from '@syncfusion/ej2-base';
import { ColorPickerEventArgs, ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
    selector: 'app-root',
    template: `<h4>Choose color</h4>
               <input ejs-colorpicker #colorpicker id="element" (change)="onChange($event)" />`
})

export class AppComponent {
    @ViewChild('colorpicker')
    private colorPicker: ColorPickerComponent;

    public onChange(args: ColorPickerEventArgs): void {
        (this.colorPicker.element.nextElementSibling.querySelector('.e-selected-color') as HTMLElement).style.borderBottomColor = args.currentValue.rgba;
    }

    ngOnInit(): void {
        setTimeout(() => {
            addClass([this.colorPicker.element.nextElementSibling.querySelector('.e-selected-color')], 'e-icons');
        }, 500);
    }
 }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Angular ColorPicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular ColorPicker Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='ang_container'>
        <div class='wrap'>
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

.ej2-sample-frame {
  height: 450px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

/* Icon customization */
.e-colorpicker-wrapper #element+.e-split-btn-wrapper .e-split-btn .e-selected-color {
  background: none;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  width: 14px;
  margin: 0px 2px;
  border-bottom-color: #008000;
}
.e-colorpicker-wrapper #element+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
  display: none;
}

.e-colorpicker-wrapper #element+.e-split-btn-wrapper .e-split-btn .e-selected-color::before {
  content: '\e35c';
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}

The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icon to customize the primary button.

Display hex code in input

The color picker input element can be showcased in the place of primary button. The applied color hex code will be updated in the primary button input.

The following sample shows the color picker with input.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component, ViewChild } from '@angular/core';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
    selector: 'app-root',
    template: `<h4>Choose color</h4>
               <input ejs-colorpicker #colorpicker id="element" readonly />`
})

export class AppComponent {
    @ViewChild('colorpicker')
    public colorPicker: ColorPickerComponent;

    ngOnInit(): void {
        this.colorPicker.element.type = 'text';
        this.colorPicker.element.classList.add('e-input');
        setTimeout(() => {
            let proxy: any = this;
            let target: HTMLElement = proxy.colorPicker.element.nextElementSibling;
            target.insertBefore(proxy.colorPicker.element, target.children[1]);
        }, 500);
    }
 }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

.ej2-sample-frame {
  height: 450px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

/* Input element customization */
.e-colorpicker-wrapper .e-split-btn-wrapper #element.e-input {
  height: 16px;
  margin: 0;
  opacity: 1;
  position: initial;
  width: 75px;
}

/* To hide primary button */
.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn {
  display: none;
}

/* Secondary button customization */
.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn {
  background: transparent;
  border-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.42);
}

.e-colorpicker-wrapper .e-split-btn-wrapper .e-input:focus+.e-btn.e-dropdown-btn {
  padding-bottom: 3px;
  border-bottom-width: 2px;
  border-bottom-color: #e3165b;
}

.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn .e-caret {
  transform: rotate(0deg);
  transition: transform 200ms ease-in-out;
}

.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn.e-active .e-caret {
  transform: rotate(180deg);
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}

Custom UI

The color picker UI can be customized in all possible ways. The following sample shows the excel like UI customization with help of SplitButton and Dialog component. In that by clicking the more colors option from color palette, the dialog contains color picker will open.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component, ViewChild } from '@angular/core';
import { ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
import { EmitType, formatUnit } from '@syncfusion/ej2-base';
import { ItemModel, MenuEventArgs, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { SplitButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
    selector: 'app-root',
    template: `<h4>Select Color</h4>
                <input ejs-colorpicker #colorpalette type="color" id="colorpalette" cssClass="e-hide-palette" mode="Palette" [inline]="true" [showButtons]="false" [modeSwitcher]="false" (change)="paletteOnChange($event)" />
                <ejs-splitbutton #splitbutton iconCss="e-icons e-font-icon" [items]="items" (beforeClose)="onBeforeClose($event)" (beforeItemRender)="beforeRender($event)" (select)="onSelect($event)"></ejs-splitbutton>
                <ejs-dialog id="modalDialog" #modalDialog cssClass="e-dlg-picker" (open)="modalDlgOpen()" [isModal]="true" [width]="width" [height]="height" [visible]="false" [target]='target' [animationSettings]='animationSettings'
                (overlayClick)="dlgClose()">
                    <ng-template #content>
                        <input ejs-colorpicker #colorpicker type="color" id="colorpicker" (change)="pickerOnChange($event)" [inline]="true" [modeSwitcher]="false" />
                    </ng-template>
                </ejs-dialog>`
})
export class AppComponent {
    @ViewChild('colorpalette')
    public colorPalette: ColorPickerComponent;
    @ViewChild('colorpicker')
    public colorPicker: ColorPickerComponent;
    @ViewChild('modalDialog')
    public modalDialog: DialogComponent;
    @ViewChild('splitbutton')
    public splitBtn: SplitButtonComponent;

    public items: ItemModel[] = [
        {
            text: ''
        },
        {
            text: "More Colors...",
            iconCss: "e-switcher"
        }
    ];

    public target: string = ".wrap";
    public width: string = '270px';
    public height: string = '336px';
    public animationSettings: Object = { effect: 'Zoom' };

    public beforeRender(args: MenuEventArgs): void {
        if (args.item.text === "") {
            this.colorPalette.cssClass = "";
            this.colorPalette.dataBind();
            this.colorPalette.refresh();
            args.element.appendChild(this.colorPalette.element.parentElement);
        }
    }

    public modalDlgOpen: EmitType<object> = () => {
        this.colorPicker.refresh();
        (this.colorPicker.element.parentElement as HTMLElement).querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', this.dlgClose);
    }

    public onBeforeClose(args: BeforeOpenCloseMenuEventArgs): void {
        document.body.appendChild(this.colorPalette.element.parentElement);
        this.colorPalette.cssClass = "e-hide-palette";
        this.colorPalette.dataBind();
    }

    public dlgClose: any = (args: any) => {
        this.modalDialog.hide();
    }

    public pickerOnChange(args: ColorPickerEventArgs): void {
        this.paletteOnChange(args);
        this.modalDialog.hide();
    }

    public paletteOnChange(args: ColorPickerEventArgs): void {
        (this.splitBtn.element.querySelector(".e-font-icon") as HTMLElement).style.borderBottomColor = args.currentValue.rgba;
    }

    public onSelect(args: MenuEventArgs): void {
        if (args.item.text === 'More Colors...') {
            this.modalDialog.show();
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { SplitButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent, DialogComponent, SplitButtonComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 350px;
  text-align: center;
}

/* Primary button icon preview */
.e-btn-icon.e-font-icon {
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

/* Primary button icon */
.e-btn-icon.e-font-icon::before {
  content: '\e34c';
}

.e-colorpicker-wrapper.e-hide-palette {
  display: none;
}

.e-dropdown-popup ul .e-item:first-child.e-blank-icon {
  height: auto;
  padding: 0;
}

.e-dlg-picker.e-dialog .e-dlg-content {
  padding: 0;
  background-color: transparent;
}

/* Sets ColorPicker dialog height */
.e-dlg-picker.e-dialog {
  max-height: 336px !important;
  background-color: transparent;
}

/* More colors li icon customization */
.e-dropdown-popup ul .e-item .e-menu-icon.e-switcher {
  height: 24px;
  margin-top: 6px;
  width: 24px;
  background: #0450c2 linear-gradient(to bottom, #fff 0, #000 100%);
  background-blend-mode: hard-light;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}