Render Palette alone in JavaScript (ES5) Color Picker control

08 May 2023 / 1 minute to read

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.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple = true;

var colorPicker = new ej.inputs.ColorPicker(
    {
        //To render palette.
        mode: 'Palette',
        //To hide the mode switcher.
        modeSwitcher: false,
        showButtons: false
    },
    '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 ColorPicker</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript ColorPicker Component">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
            <h4>Select color</h4>
            <input id="element" type="color">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

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

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