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.

{% highlight ts %}

export class AppComponent { constructor(){

    }

}

{% endhighlight %}

{% highlight html %}

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

{% endhighlight %}

• 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

N> 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}

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

• { apply: "Apply", cancel: "Cancel", swatches: "Swatches" }

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; buttonText:Object; constructor(){ this.value ="#278787"; this.buttonText={apply: "Set", cancel: "Close"}; } }

{% endhighlight %}

{:#members:buttontext-apply}

Sets the text for the apply button.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; buttonText:Object; constructor(){ this.value ="#278787"; this.buttonText={apply: "select"}; } }

{% endhighlight %}

{:#members:buttontext-cancel}

Sets the text for the cancel button.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; buttonText:Object; constructor(){ this.value ="#278787"; this.buttonText={cancel: "Exit" }; } }

{% endhighlight %}

{:#members:buttontext-swatches}

Sets the header text for the swatches area.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; buttonText:Object; constructor(){ this.value ="#278787"; this.buttonText={swatches: "colors"}; } }

{% endhighlight %}

{:#members:buttonmode}

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

• ej.ButtonMode.Split

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [buttonMode]="buttonMode"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; buttonMode:string; constructor(){ this.value ="#278787"; this.buttonMode="dropdown"; } }

{% endhighlight %}

{:#members:columns}

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

• 10

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [columns]="columns" [modelType]="modelType"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; modelType:string; columns:number; constructor(){ this.value ="#278787"; this.columns=5; this.modelType="palette"; } }

{% endhighlight %}

{:#members:cssclass}

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

• ""

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [cssClass]="cssClass"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; cssClass:string; constructor(){ this.value ="#278787"; this.cssClass="gradient-lime"; } }

{% endhighlight %}

{:#members:custom}

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.

• empty

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette" [custom]="custom"/>

{% endhighlight %}

{% highlight 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"];

    }

}

{% endhighlight %}

{:#members:displayinline}

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.

• false

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [displayInline]="displayInline"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; displayInline:boolean; constructor(){ this.value ="#278787"; this.displayInline="true"; } }

{% endhighlight %}

{:#members:enabled}

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

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [enabled]="enabled"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; enabled:boolean; constructor(){ this.value ="#278787"; this.enabled="true"; } }

{% endhighlight %}

{:#members:enableopacity}

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

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [enableOpacity]="enableOpacity"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; enableOpacity:boolean; constructor(){ this.value ="#278787"; this.enableOpacity="true"; } }

{% endhighlight %}

{:#members:htmlattributes}

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

• {}

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [htmlAttributes]="htmlAttributes"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; htmlAttributes:Object; constructor(){ this.value ="#278787"; this.htmlAttributes={disabled:"disabled"}; } }

{% endhighlight %}

{:#members:locale}

Defines the localized text values in button and tooltip.

• "en-US"

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [locale]="locale"/>

{% endhighlight %}

{% highlight 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: "所选颜色"
        }
    };

{% endhighlight %}

{:#members:modeltype}

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

• ej.ColorPicker.ModelType.Default

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; modelType:string; constructor(){ this.value ="#278787"; this.modelType="palette"; } }

{% endhighlight %}

{:#members:opacityvalue}

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

• 100

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [opacityValue]="opacityValue"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; opacityValue:number; constructor(){ this.value ="#278787"; this.opacityValue=20; } }

{% endhighlight %}

{:#members:palette}

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

• ej.ColorPicker.Palette.BasicPalette

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; modelType:string; palette:string; constructor(){ this.value ="#278787"; this.modelType="palette"; this.palette="basicpalette"; } }

{% endhighlight %}

{:#members:presettype}

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

• ej.ColorPicker.Presets.Basic

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [presetType]="presetType"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; modelType:string; presetType:string; constructor(){ this.value ="#278787"; this.modelType="palette"; this.presetType="vintage"; } }

{% endhighlight %}

{:#members:showapplycancel}

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

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showApplyCancel]="showApplyCancel"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showApplyCancel:boolean; constructor(){ this.value ="#278787"; this.showApplyCancel=true; } }

{% endhighlight %}

{:#members:showclearbutton}

Allows to show/hides the clear button in ColorPicker control

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showClearButton]="showClearButton"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showClearButton:boolean; constructor(){ this.value ="#278787"; this.showClearButton=true; } }

{% endhighlight %}

{:#members:showpreview}

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

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showPreview]="showPreview"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showPreview:boolean; constructor(){ this.value ="#278787"; this.showPreview=false; } }

{% endhighlight %}

{:#members:showrecentcolors}

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.

• false

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showRecentColors]="showRecentColors"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showRecentColors:boolean; constructor(){ this.value ="#278787"; this.showRecentColors= true; } }

{% endhighlight %}

{:#members:showswitcher}

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

• true

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showSwitcher]="showSwitcher"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showSwitcher:boolean; constructor(){ this.value ="#278787"; this.showSwitcher= false; } }

{% endhighlight %}

{:#members:showtooltip}

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

• false

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [showTooltip]="showTooltip"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; showTooltip:boolean; constructor(){ this.value ="#278787"; this.showTooltip= true; } }

{% endhighlight %}

{:#members:toolicon}

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

• null

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [toolIcon]="toolIcon"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; toolIcon:string; constructor(){ this.value ="#278787"; this.toolIcon= "e-fontcolor-icon"; } }

{% endhighlight %}

{:#members:tooltiptext}

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.

• { 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" }

{:#members:tooltiptext-switcher}

Sets the tooltip text for the switcher button.

{:#members:tooltiptext-addbutton}

Sets the tooltip text for the add button.

{:#members:tooltiptext-basic}

Sets the tooltip text for the basic preset.

{:#members:tooltiptext-monochrome}

Sets the tooltip text for the mono chrome preset.

{:#members:tooltiptext-flatcolors}

Sets the tooltip text for the flat colors preset.

{:#members:tooltiptext-seawolf}

Sets the tooltip text for the sea wolf preset.

{:#members:tooltiptext-webcolors}

Sets the tooltip text for the web colors preset.

{:#members:tooltiptext-sandy}

Sets the tooltip text for the sandy preset.

{:#members:tooltiptext-pinkshades}

Sets the tooltip text for the pink shades preset.

{:#members:tooltiptext-misty}

Sets the tooltip text for the misty preset.

{:#members:tooltiptext-citrus}

Sets the tooltip text for the citrus preset.

{:#members:tooltiptext-vintage}

Sets the tooltip text for the vintage preset.

{:#members:tooltiptext-moonlight}

Sets the tooltip text for the moon light preset.

{:#members:tooltiptext-candycrush}

Sets the tooltip text for the candy crush preset.

{:#members:tooltiptext-currentcolor}

Sets the tooltip text for the current color area.

{:#members:tooltiptext-selectedcolor}

Sets the tooltip text for the selected color area.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value" [tooltipText]="tooltipText"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; tooltipText: Object; constructor(){ this.value ="#278787"; this.tooltipText= { switcher: "Switch", currentcolor: "New Color", selectedcolor: "Old Color" }; } }

{% endhighlight %}

{:#members:value}

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

• null

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; tooltipText: Object; constructor(){ this.value ="#278787"; } }

{% endhighlight %}

{:#methods:disable}

Disables the color picker control

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight ts %}

$('#colorPicker').ejColorPicker({ value: "#278787" }); // Create ColorPicker instance var colorObj = $("#colorPicker").data("ejColorPicker"); colorObj.disable(); // disables the colorPicker

{% endhighlight %}

{:#methods:enable}

Enable the color picker control

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight ts %}

$('#colorPicker').ejColorPicker({ value: "#278787" }); // Create ColorPicker instance var colorObj = $("#colorPicker").data("ejColorPicker"); colorObj.enable(); // disables the colorPicker

{% endhighlight %}

{:#methods:getcolor}

Gets the selected color in RGB format

####Returns object

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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);

{% endhighlight %}

{:#methods:getvalue}

Gets the selected color value as string

####Returns

string

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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

{% endhighlight %}

{:#methods:hexcodetorgb}

To Convert color value from hexCode to RGB

####Returns

object

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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);

{% endhighlight %}

{:#methods:hide}

Hides the ColorPicker popup, if in opened state.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight ts %}

// Create Color picker $('#colorPicker').ejColorPicker({ value: "#278787" }); // Create ColorPicker instance var colorObj = $("#colorPicker").data("ejColorPicker"); colorObj.hide(); // hide the ColorPicker popup

{% endhighlight %}

{:#methods:hsvtorgb}

Convert color value from HSV to RGB

####Returns

object

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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);

{% endhighlight %}

{:#methods:rgbtohex}

Convert color value from RGB to HEX

####Returns

string

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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

{% endhighlight %}

{:#methods:rgbtohsv}

Convert color value from RGB to HSV

####Returns

object

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight 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);

{% endhighlight %}

{:#methods:show}

Open the ColorPicker popup.

{% highlight html %}

<input id="colorPicker" ej-colorpicker [value]="value"/>

{% endhighlight %}

{% highlight ts %}

// Create Color picker $('#colorPicker').ejColorPicker({ value: "#278787" }); // Create ColorPicker instance var colorObj = $("#colorPicker").data("ejColorPicker"); colorObj.show(); // open the ColorPicker popup

{% endhighlight %}

{:#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.

{% highlight html %}

<input id="colorPicker" ej-colorpicker (ejchange)="onChange($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onChange(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:close}

Fires after closing the color picker popup.

{% highlight html %}

<input id="colorPicker" ej-colorpicker (close)="onClose($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onClose(e: any){ // Your code here }

}

{% endhighlight %}

{:#events: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.

{% highlight html %}

<input id="colorPicker" ej-colorpicker (create)="onCreate($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCreate(e: any){ // Your code here }

}

{% endhighlight %}

{:#events: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.

{% highlight html %}

<input id="colorPicker" ej-colorpicker (destroy)="onDestroy($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDestroy(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:open}

Fires after opening the color picker popup

{% highlight html %}

<input id="colorPicker" ej-colorpicker (open)="onOpen($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onOpen(e: any){ // Your code here }

}

{% endhighlight %}

{:#events: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.

{% highlight html %}

<input id="colorPicker" ej-colorpicker (select)="onSelect($event)"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onSelect(e: any){ // Your code here }

}

{% endhighlight %}