Search results

How To

The following section explains how to customize various aspects of the ColorPicker.

Hide control buttons

ColorPicker can be rendered without control buttons (Apply/Cancel). In this case, while selecting a color, the ColorPicker pop-up is closed and selected colors can be applied directly. To hide control buttons, set the showButtons property to false.

razor
show-buttons.cs
@section ControlsSection{
    <div class='wrap'>
        <h4>Choose Color</h4>
        @Html.EJS().ColorPicker("element").ShowButtons(false).Render()
    </div>
}

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public IActionResult ShowButtons()
    {
            return View();
    }

Render palette alone

To render the Palette alone in ColorPicker, specify the mode property as Palette, and set the modeSwitcher property to false.

In the following sample, the showButtons property is disabled to hide the control buttons and it renders only the Palette area.

razor
palette-alone.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    <div class='wrap'>
        <h4>Choose Color</h4>
        @Html.EJS().ColorPicker("element").Mode(ColorPickerMode.Palette).ModeSwitcher(false).ShowButtons(false).Render()
    </div>
}

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public IActionResult PaletteAlone()
    {
            return View();
    }

To render Picker alone specify the mode property as ‘Picker’.

ColorPicker in DropDownButton

This section explains about how to render the ColorPicker in DropDownButton. The target property of the DropDownButton helps to achieve this scenario. To know about the usage of target property refer to Popup templating section.

In the below sample, the color picker is rendered as inline type by setting inline property as true and the rendered color picker wrapper is passed as a target to the DropDownButton to achieve the above scenario.

razor
dropdownbtn.cs
@section ControlsSection{
    <div class='wrap'>
        @Html.EJS().ColorPicker("colorpicker").Inline(true).Change("onChange").Render()
        <h4>Choose color</h4>
        @Html.EJS().DropDownButton("ddb").Target(".e-colorpicker-wrapper").IconCss("e-dropdownbtn-preview").BeforeClose("onDdbBeforeClose").Open("onDdbOpen").Render()
    </div>
}

<script>
    // Triggers while changing the colors.
    function onChange(args) {
        document.getElementById('ddb').children[0].style.backgroundColor = args.currentValue.rgba;
        closePopup();
    }

    // Triggers after the ddb popup open.
    function onDdbOpen(args) {
        args.element.parentElement.querySelector('.e-cancel').addEventListener('click', closePopup);
    }

    // Triggers before closing the ddb popup.
    function onDdbBeforeClose(args) {
        args.element.parentElement.querySelector('.e-cancel').removeEventListener('click', closePopup);
    }

    // Function to close the ddb popup.
    function closePopup() {
        document.getElementById('ddb').ej2_instances[0].toggle();
    }
</script>

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

    /* DropDownButton preview customization */
    #ddb .e-btn-icon.e-dropdownbtn-preview {
        background-color: #008000;
        height: 18px;
        width: 18px;
        margin-top: 0; 
    }

    #ddb {
        padding: 4px;
    }

    h4 {
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
        font-size: 14px;
    }
</style>
public IActionResult Dropdownbtn()
    {
        return View();
    }

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.

razor
custom-palette.cs
@section ControlsSection{
    <div class='wrap'>
        <div id="preview"></div>
        <h4>Select color</h4>
        @Html.EJS().ColorPicker("element").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Inline(true).ModeSwitcher(false).ShowButtons(false).Columns(4).BeforeTileRender("tileRender").PresetColors(@ViewBag.customColors).Change("onChange").Render()
    </div>
}

<script>

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

    // Triggers before rendering each palette tile.
    function tileRender(args) {
        args.element.classList.add("e-icons");
        args.element.classList.add("e-custom-tile");
    }

</script>

<style>

.e-container {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.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;
}

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

.e-container .e-palette .e-custom-tile.e-selected::before {
  content: '\e933';
}

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

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

#preview {
  background-color: #ba68c8;
  height: 50px;
  width: 100%;
}

</style>
public IActionResult CustomPalette()
    {
            List<object> custom = new List<object>();
            custom.Add(new
            {
                Custom1 = new string[] {"#ef9a9a", "#e57373", "#ef5350",
                "#f44336", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#ce93d8",
                "#ba68c8", "#ab47bc", "#9c27b0", "#b39ddb", "#9575cd", "#7e57c2", "#673AB7"},
                Custom2 = new string[] {"#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5",
                "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4",
                "#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"},
                Custom3 = new string[] {"#80CBC4", "#4DB6AC", "#26A69A", "#009688",
                "#A5D6A7", "#81C784", "#66BB6A", "#4CAF50", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A", "#E6EE9C",
                "#DCE775", "#D4E157", "#CDDC39"},
                Custom4 = new string[] {"#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B",
                "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FFAB91",
                "#FF8A65", "#FF7043", "#FF5722"}
            });

            ViewBag.customColors = custom[0];
            return View();
    }

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.

razor
hide-input.cs
@section ControlsSection{
    <div class='wrap'>
        <h4>Choose Color</h4>
        @Html.EJS().ColorPicker("element").CssClass("e-hide-value").ModeSwitcher(false).Render()
    </div>
}

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public IActionResult HideInput()
    {
            return View();
    }

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.

razor
custom-handle.cs
@section ControlsSection{
    <div class='wrap'>
        <h4>Choose Color</h4>
        @Html.EJS().ColorPicker("element").Value("#344aae").CssClass("e-custom-picker").ModeSwitcher(false).Open("onOpen").Render()
    </div>
}

<script>
    // Triggers after the color picker popup open.
    function onOpen(args) {
      args.element.querySelector('.e-handler').classList.add('e-icons');
    }
</script>

<style>
  .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;
  }
</style>
public IActionResult CustomHandle()
    {
        return View();
    }

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.

razor
icon.cs
@section ControlsSection{
    <div class='wrap'>
        <h4>Chosse color</h4>
        @Html.EJS().ColorPicker("element").CssClass("e-custom-icon").Change("onChange").Render()
    </div>
}

<script>
    var iconPreview;
    window.onload = function () {
        iconPreview = document.querySelector('.e-custom-icon .e-selected-color');
        iconPreview.classList.add("e-icons");
    }
    function onChange(args) {
        iconPreview.style.borderBottomColor = args.currentValue.rgba;
    }
</script>

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

    /* Icon customization */
    .e-custom-icon.e-colorpicker-wrapper .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-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
        display: none;
    }

    .e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color::before {
        content: '\e35c';
    }
</style>
public IActionResult Icon()
    {
        return View();
    }

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.

razor
input.cs
<div class='wrap'>
    <h4>Choose color</h4>
    @Html.EJS().ColorPicker("element").CssClass("e-custom-input").Render()
</div>

@section Scripts {
    <script>
        var target = document.getElementById("element");
        ej.base.attributes(target, { "type": "text" });
        ej.base.addClass([target], "e-input");
        window.onload = function () {
            // Moving the ColorPicker input element before the secondary button.
            target.nextElementSibling.insertBefore(target, target.nextElementSibling.children[1]);
        }
    </script>

}

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

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

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

    /* Secondary button customization */
    .e-custom-input.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-custom-input.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;
    }

    /* Rotating the dropdown arrow */
    .e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn .e-caret {
        transform: rotate(0deg);
        transition: transform 200ms ease-in-out;
    }

    .e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn.e-active .e-caret {
        transform: rotate(180deg);
    }
</style>
public IActionResult Input()
    {
        return View();
    }

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.

razor
excel-ui.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div class="wrap">
    <ul id="target" tabindex="0">
        <li class="e-item e-palette-item">
            @Html.EJS().ColorPicker("palette").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Inline(true).ModeSwitcher(false).ShowButtons(false).Change("onPaletteChange").Render()
        </li>
        <li class="e-item" tabindex="-1">
            <span class="e-menu-icon e-morecolors"></span>
            More colors...
        </li>
    </ul>
    <div>
        @Html.EJS().ColorPicker("picker").Inline(true).ModeSwitcher(false).Change("onPickerChange").Render()
        <h4>Select color</h4>
        @Html.EJS().SplitButton("splitbtn").IconCss("e-icons e-font-icon").Target("#target").Open("onDdPopupOpen").BeforeClose("onBeforeDdPopupClose").Render()
        @Html.EJS().Dialog("picker-dialog").CssClass("e-dlg-picker").Created("onLoad").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).IsModal(true).Visible(false).OverlayClick("closePickerDlg").Content("<div class='dlgContent'></div>").Width("270px").Height("336px").Target(".wrap").Render()
    </div>
</div>

@section Scripts {
    <script>
        var splitBtnIcon = document.getElementById("splitbtn");
        var dlg = document.getElementById("picker-dialog");
        var picker = document.getElementById("picker");
    </script>
}

<script>
    function onLoad() {
        picker.nextElementSibling.querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', closePickerDlg);
        dlg.querySelector(".dlgContent").appendChild(picker.parentElement);
    }

    function onPickerChange(args) {
        onPaletteChange(args);
        closePickerDlg();
    }

    function onPaletteChange(args) {
        splitBtnIcon.querySelector('.e-font-icon').style.borderBottomColor = args.currentValue.rgba;
    }

    function onDdPopupOpen(args) {
        args.element.children[1].addEventListener('click', openPickerDlg);
    }

    function onBeforeDdPopupClose(args) {
        args.element.children[1].removeEventListener('click', openPickerDlg);
    }

    function openPickerDlg() {
        dlg.ej2_instances[0].show();
    }

    function closePickerDlg() {
        dlg.ej2_instances[0].hide();
    }
</script>

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

    .e-btn-icon.e-font-icon {
        border-bottom-style: solid;
        border-bottom-width: 3px;
    }

     .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-palette-item {
        height: auto;
        padding: 0;
    }

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

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

    .e-dropdown-popup ul .e-item .e-menu-icon.e-morecolors {
        height: 24px;
        margin-top: 6px;
        width: 24px;
        background-image: linear-gradient(to bottom, #fff 0, #000 100%);
        background-color: #0450c2;
        background-blend-mode: hard-light;
    }
</style>
public IActionResult ExcelUi()
    {
        return View();
    }

Handle no color support

The ColorPicker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes empty and considered as no color has been selected from color picker.

Default no color

To achieve this, set noColor property as true.

In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile you can achieve the above functionalities.

razor
nocolor.cs
<div class='wrap'>
    <div id="preview"></div>
    <h4>Select color</h4>
    @Html.EJS().ColorPicker("element").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).NoColor(true).Value("#ba68c8").ModeSwitcher(false).ShowButtons(false).Change("onChange").Render()
</div>

@section Scripts {
    <script>
        var preview = document.getElementById("preview");
        // Initially set the default color and value to preview.
        preview.style.backgroundColor = "#ba68c8";
        preview.textContent = "#ba68c8";
    </script>
}

<script>
    // Triggers while selecting colors from palette.
    function onChange(args) {
        preview.style.backgroundColor = args.currentValue.hex;
        preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
    }
</script>

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

    #preview {
        border: 1px solid;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }
</style>
public IActionResult Nocolor()
    {
        return View();
    }

Custom no color

The following sample show the color palette with custom no color option.

razor
custom-nocolor.cs
<div class='wrap'>
    <ul id="target" tabindex="0">
        <li class="e-item e-palette-item">
            @Html.EJS().ColorPicker("element").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Inline(true).ModeSwitcher(false).ShowButtons(false).Columns(4).BeforeTileRender("tileRender").PresetColors(@ViewBag.customColors).Change("onChange").Render()
        </li>
        <li class="e-item" id="no-color" tabindex="-1">
            <span class="e-menu-icon e-nocolor"></span>
            No color
        </li>
    </ul>
    <div id="preview"></div>
    <h4>Select color</h4>
    @Html.EJS().SplitButton("splitbtn").IconCss("e-cp-icons e-picker-icon").Target("#target").Render()
</div>

@section Scripts {
    <script>
        var preview = document.getElementById("preview");
        // Initially set the default color and value to preview.
        preview.style.backgroundColor = "#f44336";
        preview.textContent = "#f44336";

        // Binding click event for no color li.
        document.getElementById('no-color').onclick = function () {
            //sets color picker value property to null.
            document.getElementById("element").ej2_instances[0].setProperties({ 'value': "" }, true);
            document.querySelector('.e-split-btn .e-picker-icon').style.borderBottomColor = "transparent";
            preview.textContent = "No color"
            preview.style.backgroundColor = "transparent";
        }
    </script>
}

<script>
    // Triggers while selecting colors from palette.
    function onChange(args) {
        var splitBtnInst = document.getElementById('splitbtn').ej2_instances[0];
        document.querySelector(".e-split-btn .e-picker-icon").style.borderBottomColor = args.currentValue.hex;
        preview.style.backgroundColor = args.currentValue.hex;
        preview.textContent = args.currentValue.hex;
        if (splitBtnInst.element.getAttribute("aria-expanded")) {
          splitBtnInst.toggle();
          splitBtnInst.element.focus();
        }
    }

    // Triggers before rendering each palette tile.
    function tileRender(args) {
        args.element.classList.add("e-custom-tile");
    }
</script>

<style>

    /* Preview area styles */
    #preview {
        border: 1px solid;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        width: 100%;
    }

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

    @@font-face {
        font-family: 'paint';
        src:
        url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmIZD+uwAAAcgAAADMaGVhZBKhhHQAAADQAAAANmhoZWEHjANrAAAArAAAACRobXR4B+j/8wAAAYAAAAAIbG9jYQBmAAAAAAHAAAAABm1heHABDgBKAAABCAAAACBuYW1ln6hzswAAApQAAAINcG9zdEkLMmUAAASkAAAANgABAAADUv9qAFoEAP/z//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAAZfc6F8PPPUACwPoAAAAANfSn9kAAAAA19Kf2f/z//wD6gPhAAAACAACAAAAAAAAAAEAAAACAD4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPhAJYAAAABAAAAAAAABAAAAAPo//MAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAZgAAAAL/8//8A+oD4QAKAD0AAAEWBgceATc1JiQHJTMmNjceARcVJx4BBx4BFQ4BIiYnNDY3PgEvAS4BIw4BBwEGHgI3AT4BLwE1LgEnDgEDeiRlCgulCxP+8RT+GyYDQFxOZQwTBQEDDxEBJzonAREOCQkPJQ4cDBcdAf6oG1a3nx8BWQ4RHKADeG1oWwHTLHVwYVmL6Kx1BHEqfwYFqWUHEx4tDAocEx0nJx0RHgoVUDQpDgsBFAH+px2guFUaAVkNOiCgCXnhCAWOAAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABQABAAEAAAAAAAIABwAGAAEAAAAAAAMABQANAAEAAAAAAAQABQASAAEAAAAAAAUACwAXAAEAAAAAAAYABQAiAAEAAAAAAAoALAAnAAEAAAAAAAsAEgBTAAMAAQQJAAAAAgBlAAMAAQQJAAEACgBnAAMAAQQJAAIADgBxAAMAAQQJAAMACgB/AAMAAQQJAAQACgCJAAMAAQQJAAUAFgCTAAMAAQQJAAYACgCpAAMAAQQJAAoAWACzAAMAAQQJAAsAJAELIHBhaW50UmVndWxhcnBhaW50cGFpbnRWZXJzaW9uIDEuMHBhaW50Rm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABwAGEAaQBuAHQAUgBlAGcAdQBsAGEAcgBwAGEAaQBuAHQAcABhAGkAbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABwAGEAaQBuAHQARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMADHBhaW50LWJ1Y2tldAAAAAA=) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-cp-icons {
        font-family: 'paint' !important;
        speak: none;
        font-size: 55px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ColorPicker customization */
    .e-dropdown-popup ul#target {
        padding: 0;
    }

    .e-dropdown-popup ul .e-item.e-palette-item {
        height: auto;
        padding: 0;
    }

    .e-btn-icon.e-picker-icon {
        border-bottom-color: #f44336;
        border-bottom-style: solid;
        border-bottom-width: 3px;
    }

    /* Picker icon */
    .e-btn-icon.e-picker-icon::before {
        content: '\e700';
    }

    /* No color li styles */
    .e-dropdown-popup ul .e-item .e-menu-icon.e-nocolor {
        height: 22px;
        margin-top: 8px;
        width: 22px;
        background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
    }

    /* Tile customization */
    .e-container .e-palette .e-tile.e-custom-tile {
        height: 24px;
        width: 24px;
        margin: 4px;
    }
</style>
public IActionResult CustomNocolor()
    {
            List<object> custom = new List<object>();
            custom.Add(new
            {
                Custom1 = new string[] {"#f44336", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4",
                "#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107"}
            });

            ViewBag.customColors = custom[0];
            return View();
    }

Disabled

To achieve disabled state in ColorPicker, set the disabled property to true. The ColorPicker pop-up cannot be accessed in disabled state.

The following example shows the disabled state of ColorPicker component.

razor
disabled.cs
@section ControlsSection{
    <div class='wrap'>
        <h4>Disabled state</h4>
        @Html.EJS().ColorPicker("element").Disabled(true).Render()
    </div>
}

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public IActionResult Disabled()
    {
            return View();
    }