--- title: "Javascript Color Picker Plugin with Jsuites v4" description: "Vanilla javascript color picker plugin." source: https://jsuites.net/docs/v4/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; Examples -------- ### Color picker Create a input color picker as a web component ```html

``` ### Custom colors How to create a color input with custom colors from a HTML input. ```html ``` Documentation ------------- ### Methods | Method | Description | | --- | --- | | color.open(); | 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 | ### Events | 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 | Examples -------- * [Basic color picker](/docs/v4/color-picker/basic) * [Color picker Events](/docs/v4/color-picker/events) * [Custom colors](/docs/v4/color-picker/custom-colors) * [Color Palettes](/docs/v4/color-picker/color-palettes) * [Responsive color picker](/docs/v4/color-picker/mobile)