ejColorPicker

The ColorPicker control provides you a rich visual interface for color selection. You can select the color from the professionally designed palettes or custom color. By clicking a point on the color, you can change the active color to the color that is located under the pointer.

Syntax

  • ts
  • export class AppComponent { 
            constructor(){
                    
            }
     }
    Name Type Description
    options object settings for color picker

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="#278787" />

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.colorpicker.js

    • module:ej.button.js

    • module:ej.splitbutton.js

    • module:ej.menu.js

    • module:ej.slider.js

    NOTE

    jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

    Members

    buttonText object

    The ColorPicker control allows to define the customized text to displayed in button elements. Using the property to achieve the customized culture values.

    Default Value

    • { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            value: string;
            buttonText:Object;
            constructor(){
                    this.value ="#278787";
                    this.buttonText={apply: "Set", cancel: "Close"};
            }
     }

    buttonText.apply string

    Sets the text for the apply button.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            value: string;
            buttonText:Object;
            constructor(){
                    this.value ="#278787";
                    this.buttonText={apply: "select"};
            }
     }

    buttonText.cancel string

    Sets the text for the cancel button.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            value: string;
            buttonText:Object;
            constructor(){
                    this.value ="#278787";
                    this.buttonText={cancel: "Exit" };
            }
     }

    buttonText.swatches string

    Sets the header text for the swatches area.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            value: string;
            buttonText:Object;
            constructor(){
                    this.value ="#278787";
                    this.buttonText={swatches: "colors"};
            }
     }

    buttonMode enum|string

    Allows to change the mode of the button. Please refer below to know available button mode

    Name Description
    Split Displays the button in split mode
    Dropdown Displays the button in Dropdown mode

    Default Value

    • ej.ButtonMode.Split

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [buttonMode]="buttonMode"/>
  • ts
  • export class AppComponent { 
            value: string;
            buttonMode:string;
            constructor(){
                    this.value ="#278787";
                    this.buttonMode="dropdown";
            }
     }

    columns number|string

    Specifies the number of columns to be displayed color palette model.

    Default Value

    • 10

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [columns]="columns" [modelType]="modelType"/>
  • ts
  • export class AppComponent { 
            value: string;
            modelType:string;
            columns:number;
            constructor(){
                    this.value ="#278787";
                    this.columns=5;
                    this.modelType="palette";
            }
     }

    cssClass string

    This property allows you to customize its appearance using user-defined CSS and custom skin options such as colors and backgrounds.

    Default Value

    • ””

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [cssClass]="cssClass"/>
  • ts
  • export class AppComponent { 
            value: string;
            cssClass:string;
            constructor(){
                    this.value ="#278787";
                    this.cssClass="gradient-lime";
            }
     }

    custom array

    This property allows to define the custom colors in the palette model.Custom palettes are created by passing a comma delimited string of HEX values or an array of colors.

    Default Value

    • empty

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette" [custom]="custom"/>
  • ts
  • export class AppComponent { 
            value: string;
            cssClass:string;
            palette:string;
            custom:string[];
            constructor(){
                    this.value ="#278787";
                    this.modelType="palette";
                    this.palette="palette";
                    this.custom= ["ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff"];
    
            }
     }

    displayInline boolean

    This property allows to embed the popup in the order of DOM element flow . When we set the value as true, the color picker popup is always in visible state.

    Default Value

    • false

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [displayInline]="displayInline"/>
  • ts
  • export class AppComponent { 
            value: string;
            displayInline:boolean;
            constructor(){
                    this.value ="#278787";
                    this.displayInline="true";
            }
     }

    enabled boolean

    This property allows to change the control in enabled or disabled state.

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [enabled]="enabled"/>
  • ts
  • export class AppComponent { 
            value: string;
            enabled:boolean;
            constructor(){
                    this.value ="#278787";
                    this.enabled="true";
            }
     }

    enableOpacity boolean

    This property allows to enable or disable the opacity slider in the color picker control

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [enableOpacity]="enableOpacity"/>
  • ts
  • export class AppComponent { 
            value: string;
            enableOpacity:boolean;
            constructor(){
                    this.value ="#278787";
                    this.enableOpacity="true";
            }
     }

    htmlAttributes object

    It allows to define the characteristics of the ColorPicker control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [htmlAttributes]="htmlAttributes"/>
  • ts
  • export class AppComponent { 
            value: string;
            htmlAttributes:Object;
            constructor(){
                    this.value ="#278787";
                    this.htmlAttributes={disabled:"disabled"};
            }
     }

    locale string

    Defines the localized text values in button and tooltip.

    Default Value

    • “en-US”

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [locale]="locale"/>
  • ts
  • export class AppComponent { 
            value: string;
            locale:string;
            constructor(){
                    this.value ="#278787";
                    this.locale="zh-CN";
            }
     }
    
          ej.ColorPicker.Locale["zh-CN"] = {
                buttonText: {
                    apply: "应用",
                    cancel: "取消",
                    swatches: "色板"
                },
                tooltipText: {
                    switcher: "切换器",
                    addbutton: "添加颜色",
                    basic: "基本",
                    monochrome: "单色铬",
                    flatcolors: "平的颜色",
                    seawolf: "海狼",
                    webcolors: "网颜色",
                    sandy: "沙",
                    pinkshades: "桃红色树荫",
                    misty: "蒙蒙",
                    citrus: "柑橘",
                    vintage: "葡萄酒",
                    moonlight: "月光",
                    candycrush: "糖果粉碎",
                    currentcolor: "当前颜色",
                    selectedcolor: "所选颜色"
                }
            };

    modelType enum|string

    Specifies the model type to be rendered initially in the color picker control. See below to get available ModelType

    Name Description
    Palette support palette type mode in color picker.
    Picker support palette type mode in color picker.

    Default Value

    • ej.ColorPicker.ModelType.Default

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType"/>
  • ts
  • export class AppComponent { 
            value: string;
            modelType:string;
            constructor(){
                    this.value ="#278787";
                    this.modelType="palette";
            }
     }

    opacityValue number|string

    This property allows to change the opacity value .The selected color opacity will be adjusted by using this opacity value.

    Default Value

    • 100

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [opacityValue]="opacityValue"/>
  • ts
  • export class AppComponent { 
            value: string;
            opacityValue:number;
            constructor(){
                    this.value ="#278787";
                    this.opacityValue=20;
            }
     }

    palette enum|string

    Specifies the palette type to be displayed at initial time in palette model.There two types of palette model available in ColorPicker control. See below available Palette

    Name Description
    BasicPalette used to show the basic palette
    CustomPalette used to show the custom palette

    Default Value

    • ej.ColorPicker.Palette.BasicPalette

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette"/>
  • ts
  • export class AppComponent { 
            value: string;
            modelType:string;
            palette:string;
            constructor(){
                    this.value ="#278787";
                    this.modelType="palette";
                    this.palette="basicpalette";
            }
     }

    presetType enum|string

    This property allows to define the preset model to be rendered initially in palette type.It consists of 12 different types of presets. Each presets have 50 colors. See below available Presets

    Name Description
    Basic used to show the basic presets
    CandyCrush used to show the CandyCrush colors presets
    Citrus used to show the Citrus colors presets
    FlatColors used to show the FlatColors presets
    Misty used to show the Misty presets
    MoonLight used to show the MoonLight presets
    PinkShades used to show the PinkShades presets
    Sandy used to show the Sandy presets
    SeaWolf used to show the Seawolf presets
    Vintage used to show the Vintage presets
    WebColors used to show the WebColors presets

    Default Value

    • ej.ColorPicker.Presets.Basic

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [presetType]="presetType"/>
  • ts
  • export class AppComponent { 
            value: string;
            modelType:string;
            presetType:string;
            constructor(){
                    this.value ="#278787";
                    this.modelType="palette";
                    this.presetType="vintage";
            }
     }

    showApplyCancel boolean

    Allows to show/hides the apply and cancel buttons in ColorPicker control

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showApplyCancel]="showApplyCancel"/>
  • ts
  • export class AppComponent { 
            value: string;
            showApplyCancel:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showApplyCancel=true;
            }
     }

    showClearButton boolean

    Allows to show/hides the clear button in ColorPicker control

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showClearButton]="showClearButton"/>
  • ts
  • export class AppComponent { 
            value: string;
            showClearButton:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showClearButton=true;
            }
     }

    showPreview boolean

    This property allows to provides live preview support for current cursor selection color and selected color.

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showPreview]="showPreview"/>
  • ts
  • export class AppComponent { 
            value: string;
            showPreview:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showPreview=false;
            }
     }

    showRecentColors boolean

    This property allows to store the color values in custom list.The ColorPicker will keep up to 11 colors in a custom list.By clicking the add button, the selected color from picker or palette will get added in the recent color list.

    Default Value

    • false

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showRecentColors]="showRecentColors"/>
  • ts
  • export class AppComponent { 
            value: string;
            showRecentColors:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showRecentColors= true;
            }
     }

    showSwitcher boolean

    Allows to show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in color picker.

    Default Value

    • true

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showSwitcher]="showSwitcher"/>
  • ts
  • export class AppComponent { 
            value: string;
            showSwitcher:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showSwitcher= false;
            }
     }

    showTooltip boolean

    This property allows to shows tooltip to notify the slider value in color picker control.

    Default Value

    • false

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [showTooltip]="showTooltip"/>
  • ts
  • export class AppComponent { 
            value: string;
            showTooltip:boolean;
            constructor(){
                    this.value ="#278787";
                    this.showTooltip= true;
            }
     }

    toolIcon string

    Specifies the toolIcon to be displayed in dropdown control color area.

    Default Value

    • null

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [toolIcon]="toolIcon"/>
    
     <style>
            .e-colorwidget .e-tool .e-fontcolor-icon:before
            {
            content: "\e632";
            margin-top: 9px;
            font-size: 10px;
            margin-left: 5px;
            }
            </style>
  • ts
  • export class AppComponent { 
            value: string;
            toolIcon:string;
            constructor(){
                    this.value ="#278787";
                    this.toolIcon= "e-fontcolor-icon";
            }
     }

    tooltipText object

    This property allows to define the customized text or content to displayed when mouse over the following elements. This property also allows to use the culture values.

    Default Value

    • { switcher: “Switcher”, addbutton: “Add Color”, basic: “Basic”, monochrome: “Mono Chrome”, flatcolors: “Flat Color”, seawolf: “Sea Wolf”, webcolors: “Web Colors”, sandy: “Sandy”, pinkshades: “Pink Shades”, misty: “Misty”, citrus: “Citrus”, vintage: “Vintage”, moonlight: “Moon Light”, candycrush: “Candy Crush”, currentcolor: “Current Color”, selectedcolor: “Selected Color” }

    tooltipText.switcher string

    Sets the tooltip text for the switcher button.

    tooltipText.addbutton string

    Sets the tooltip text for the add button.

    tooltipText.basic string

    Sets the tooltip text for the basic preset.

    tooltipText.monochrome string

    Sets the tooltip text for the mono chrome preset.

    tooltipText.flatcolors string

    Sets the tooltip text for the flat colors preset.

    tooltipText.seawolf string

    Sets the tooltip text for the sea wolf preset.

    tooltipText.webcolors string

    Sets the tooltip text for the web colors preset.

    tooltipText.sandy string

    Sets the tooltip text for the sandy preset.

    tooltipText.pinkshades string

    Sets the tooltip text for the pink shades preset.

    tooltipText.misty string

    Sets the tooltip text for the misty preset.

    tooltipText.citrus string

    Sets the tooltip text for the citrus preset.

    tooltipText.vintage string

    Sets the tooltip text for the vintage preset.

    tooltipText.moonlight string

    Sets the tooltip text for the moon light preset.

    tooltipText.candycrush string

    Sets the tooltip text for the candy crush preset.

    tooltipText.currentcolor string

    Sets the tooltip text for the current color area.

    tooltipText.selectedcolor string

    Sets the tooltip text for the selected color area.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value" [tooltipText]="tooltipText"/>
  • ts
  • export class AppComponent { 
            value: string;
            tooltipText: Object;
            constructor(){
                    this.value ="#278787";
                    this.tooltipText= { switcher: "Switch",  currentcolor: "New Color", selectedcolor: "Old Color" };
            }
     }

    value string

    Specifies the color value for color picker control, the value is in hexadecimal form with prefix of “#”.

    Default Value

    • null

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • export class AppComponent { 
            value: string;
            tooltipText: Object;
            constructor(){
                    this.value ="#278787";
            }
     }

    Methods

    disable()

    Disables the color picker control

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.disable(); 
            // disables the colorPicker

    enable()

    Enable the color picker control

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.enable(); // disables the colorPicker

    getColor()

    Gets the selected color in RGB format

    ####Returns
    object

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.getColor(); 
            // gets the selected color in RGB format
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);

    getValue()

    Gets the selected color value as string

    ####Returns

    string

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            alert(colorObj.getValue()); // gets the selected color value as string

    hexCodeToRGB(colorCode)

    To Convert color value from hexCode to RGB

    ####Returns

    object

    Name Type Description
    colorCode string Specified HEX code converted to RGB

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.hexCodeToRGB("#278787"); // Convert color value from hexCode to RGB
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);

    hide()

    Hides the ColorPicker popup, if in opened state.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.hide(); // hide the ColorPicker popup

    HSVToRGB(HSV)

    Convert color value from HSV to RGB

    ####Returns

    object

    Name Type Description
    HSV object Specified HSV code converted to RGB

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.HSVToRGB({h:230,s:98,v:98}); // Convert color value from HSV to RGB
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);

    RGBToHEX(rgb)

    Convert color value from RGB to HEX

    ####Returns

    string

    Name Type Description
    RGB object Specified RGB code converted to HEX code

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            alert(colorObj.RGBToHEX(colorObj.getColor())); // Convert color value from RGB to HEX

    RGBToHSV(rgb)

    Convert color value from RGB to HSV

    ####Returns

    object

    Name Type Description
    RGB object Specified RGB code converted to HSV code

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.RGBToHSV({r:39,g:135,b:135}); // Convert color value from RGB to HSV
            alert("H="+color.r+", S="+color.g+", V="+color.b);

    show()

    Open the ColorPicker popup.

    Example

  • html
  • <input id="colorPicker" ej-colorpicker [value]="value"/>
  • ts
  • // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.show(); // open the ColorPicker popup

    Events

    ejchange

    Fires after Color value has been changed successfully.If the user want to perform any operation after the color value changed then the user can make use of this change event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    changeFrom string return the previous color value
    model object returns the color picker model
    type string returns the name of the event
    value string return the changed color value

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (ejchange)="onChange($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onChange(e: any){ 
            // Your code here
            }
    
     }

    close

    Fires after closing the color picker popup.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (close)="onClose($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onClose(e: any){ 
            // Your code here
            }
    
     }

    create

    Fires after Color picker control is created. If the user want to perform any operation after the color picker control creation then the user can make use of this create event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (create)="onCreate($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onCreate(e: any){ 
            // Your code here
            }
    
     }

    destroy

    Fires after Color picker control is destroyed. If the user want to perform any operation after the color picker control destroyed then the user can make use of this destroy event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (destroy)="onDestroy($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onDestroy(e: any){ 
            // Your code here
            }
    
     }

    open

    Fires after opening the color picker popup

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (open)="onOpen($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onOpen(e: any){ 
            // Your code here
            }
    
     }

    select

    Fires after Color value has been selected successfully. If the user want to perform any operation after the color value selected then the user can make use of this select event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event
    value string return the selected color value

    Example

  • html
  • <input id="colorPicker" ej-colorpicker (select)="onSelect($event)"/>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onSelect(e: any){ 
            // Your code here
            }
    
     }