JavaScript color picker

The jSuites.color is a lightweight JavaScript color picker plugin. It can be used as a vanilla plugin or a webcomponent and can be integrated with React, Angular, Vue, or any other JS library. The color picker allows users to choose a color in a responsive color grid and perform actions using the available events such as onchange. The available colors can be easily customized. This plugin brings a great user experience across different devices, independent of the screen site.

  • React, Angular, Vue compatible;
  • Mobile friendly;
  • Color picker;
  • Customize colors and palettes;
  • Several events and easy integration;
  • JS plugin or web component;


Color picker

Create a input color picker as a web component

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<jsuites-color value="#009688"></jsuites-color>
document.querySelector('jsuites-color').addEventListener('onchange', function(e) {
    // Set the font color[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);

Custom colors

How to create a color input with custom colors from a HTML input.

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<input id="color-picker"/>
jSuites.color(document.getElementById('color-picker'), {
    palette: [
        ['#001969', '#233178', '#394a87', '#4d6396', '#607ea4', '#7599b3' ],
        ['#00429d', '#2b57a7', '#426cb0', '#5681b9', '#6997c2', '#7daeca' ],
        ['#3659b8', '#486cbf', '#597fc5', '#6893cb', '#78a6d1', '#89bad6' ],
        ['#003790', '#315278', '#48687a', '#5e7d81', '#76938c', '#8fa89a' ],



Method Description; Open the color picker
color.close(boolean); Close the color picker
@param int ignoreEvents - Do no execute onclose event
color.getValue(); Get the current value of the color picker
color.setValue(string); Set a new value to the color picker
@param hex newColor - Set a new value


Method Description
onchange Method executed when a value is changed.
(HTMLElement element, String color) => void
onclose Method executed when the color picker is closed.
(HTMLElement element) => void
onopen Method executed when the color picker is opened.
(HTMLElement element) => void

Initialization settings

Property Description
fullscreen: boolean Open the color picker in fullscreen mode. Default: false
value: string Initial value of the compontent
palette: Array of colors Custom colors
placeholder: string The default instruction text on the element
closeOnChange: boolean Automatically close the color picker container when on color is selected
doneLabel: string Done button label
resetLabel: string Reset button label