09:40 7/6/26 JavaScript Color Picker
menu
Documentation keyboard_arrow_right Color picker
JavaScript Color Picker
The [Link] is a versatile and lightweight JavaScript color picker for seamless
integration into web projects. Whether you're working with standalone applications or
incorporating them into React, Angular, or Vue frameworks, this color picker is engineered for
adaptability. It offers a straightforward and intuitive color selection interface, enhancing the
user experience. Key features include:
Framework Compatibility: Works effortlessly with popular frameworks like React,
Angular, and Vue;
Mobile-Optimized: Delivers a responsive and mobile-friendly user interface;
Customization: Allows tailored color choices and palette configurations;
Event Integration: Supports various events to help with integrations;
Versatility: Can be utilized as a JavaScript plugin or web component;
Color Picker Implementations
jSuites Color Picker - Lightweight & Framework Compatible
This page documents the jSuites Color Picker, a lightweight vanilla JavaScript color picker
plugin compatible with React, Angular, and Vue.
Best for:
Simple color selection needs
Framework-agnostic projects
Lightweight implementations
No build tools required
LemonadeJS Color Picker - Reactive Component
[Link] 1/6
09:40 7/6/26 JavaScript Color Picker
For applications requiring reactive data binding and enhanced framework integration,
LemonadeJS Color Picker offers:
Reactive Design: Two-way data binding with automatic updates
Lightweight: 2.59KB gzipped
Framework Integration: Seamless Vue, React, Angular support
Dual Modes: Inline and modal display options
Personal Palette: Customizable user color collections
Explore LemonadeJS Color Picker →
Comparison
Feature jSuites LemonadeJS
Size Lightweight 2.59KB gzipped
Reactive - ✓ Two-way binding
Framework Support Compatible ✓ Integrated
Custom Palettes ✓ ✓ Personal + Gradient
Display Modes Standard Inline + Modal
Best For Simple pickers Reactive apps
Documentation
Install
npm install jsuites
Methods
[Link] 2/6
09:40 7/6/26 JavaScript Color Picker
Method Description
[Link](); Open the color picker
Close the color picker
[Link](boolean);
@param int ignoreEvents - Do no execute onclose event
[Link](); Get the current value of the color picker
Set a new value to the color picker
[Link](string);
@param hex newColor - Set a new value
Events
Method Description
Method executed when a value is changed.
onchange
(HTMLElement element, String color) => void
Method executed when the color picker is closed.
onclose
(HTMLElement element) => void
Method executed when the color picker is opened.
onopen
(HTMLElement element) => void
Initialization settings
Property Description
fullscreen: boolean Whether to open in fullscreen mode. Default: false.
value: string Initial value of the component
palette: Array of colors Custom colors
placeholder: string The default instruction text on the element
closeOnChange: boolean Auto-close on color selection
doneLabel: string Label for the done button
[Link] 3/6
09:40 7/6/26 JavaScript Color Picker
Property Description
resetLabel: string Label for the reset button
Examples
Web Component Color Picker
Create a color picker as a web component:
#009688
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<jsuites-color value="#009688"></jsuites-color>
<script>
[Link]('jsuites-color').addEventListener('onchange',
function(e) {
// Set the font color
[Link][0].[Link] = [Link];
// Show on console
[Link]('New value:' + [Link]);
});
</script>
</html>
Color Picker
[Link] 4/6
09:40 7/6/26 JavaScript Color Picker
A basic javascript color picker event bound to an HTML input element.
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id="basic-color-picker"/>
<script>
let color = [Link]([Link]('basic-color-picker'),
{
onchange: function(e, color) {
// Set the font color
[Link] = color;
// Show on console
[Link]('New value:' + color);
}
});
</script>
</html>
Custom Colors
Create a color input with custom colors:
[Link] 5/6
09:40 7/6/26 JavaScript Color Picker
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id="custom-color-picker"/>
<script>
[Link]([Link]('custom-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' ],
]
});
</script>
</html>
More Examples
Color Picker Events
Color Palettes
Responsive Color Picker
[Link] 6/6