---
title: "JavaScript Color Picker | LemonadeJS v5"
description: "LemonadeJS v5 archive. LemonadeJS introduces a versatile and responsive JavaScript color picker. This reactive component simplifies the color selection."
source: https://lemonadejs.com/docs/v5/plugins/color-picker/
---
# JavaScript Color Picker
`JavaScript Components`{.jtag .black .framework-images}
`Component size: 2.59KB gzipped`
The LemonadeJS JavaScript Color Picker is a lightweight, responsive, and reactive component for web applications. It features two primary elements: a customizable personal palette and a pre-defined color gradient. Additionally, it supports various events and offers seamless integration with frameworks like React, Vue, and Angular.
## Color Picker Use Cases
### Reactive Applications
Use LemonadeJS Color Picker for applications requiring reactive data binding:
- Form color selectors with live updates
- Theme customizers and design systems
- Design tools and visual editors
- Color palette builders with automatic sync
### Lightweight Alternative - Jsuites Color Picker
For simpler use cases without reactive requirements, [Jsuites Color Picker](https://jsuites.net/docs/color-picker) offers:
- Lightweight vanilla JavaScript
- No build tools required
- Simple API
- Framework compatible (React, Angular, Vue)
- Mobile-optimized
**[Explore Jsuites Color Picker](https://jsuites.net/docs/color-picker)**
---
### When to Use Each
| Component | Best For | Reactive | Size |
|-----------|----------|----------|------|
| **LemonadeJS Color Picker** | Reactive apps, two-way binding, modern frameworks | ✓ | 2.59KB |
| **Jsuites Color Picker** | Simple pickers, lightweight needs, framework-agnostic | - | Lightweight |
---
## Documentation
### Installation
```bash
npm install @lemonadejs/color
```
### Settings
| Attribute | Description |
|---------------------|---------------------------------------------------------------------------------------------------|
| palette?: String[] | A matrix containing hexadecimal color values. There is a default palette. |
| closed?: Boolean | Controls the open and close state of the color picker modal. |
| type?: String | The type of element that will toggle the color picker modal. Options: 'input', 'inline' or empty. |
| value?: String | The value of the color that is currently selected. |
### Events
| Event | Description |
|----------------------------------------------------|----------------------------|
| onopen?: (s: Object) => void | Called when modal opens. |
| onclose?: (s: Object) => void | Called when modal closes. |
| onchange?: (s: Object, value: String) => void | Called when value changes. |
Examples
--------
### Inline usage
The `type: inline` configuration allows for embedding the color picker directly within a webpage or application. Utilizing this setup, user interactions with the color picker can trigger actions through events, facilitating a more interactive and integrated experience.
```html
```
```javascript
import lemonade from 'lemonadejs'
import Color from '@lemonadejs/color';
import '@lemonadejs/color/dist/style.css';
import Tabs from '@lemonadejs/tabs';
import '@lemonadejs/tabs/dist/style.css';
export default function App() {
return render => render``;
}
```
```jsx
import React, { useRef } from 'react';
import Color from '@lemonadejs/color/dist/react';
import '@lemonadejs/color/dist/style.css';
import Tabs from '@lemonadejs/tabs/dist/react';
import '@lemonadejs/tabs/dist/style.css';
export default function App() {
const myRef = useRef();
return (<>
);
}
```
```vue
```
### Custom Color Palette
The following example illustrates how to incorporate the `onchange` event and customize the palette. It also features the default modal type, enabling users to open a modal for color selection from the color picker.
```html
```
```javascript
// codesandbox: https://codesandbox.io/p/sandbox/lemonadejs-reactive-app-forked-s2rsll?file=%2Fsrc%2FApp.js
import lemonade from 'lemonadejs'
import Color from '@lemonadejs/color';
import '@lemonadejs/color/dist/style.css';
function App() {
const handleUpdate = (s, color) => {
this.button.style.backgroundColor = color;
}
const 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"]
];
return render => render`<>
`
}
```
```jsx
import React, { useRef } from 'react';
import Color from '@lemonadejs/color/dist/react';
import '@lemonadejs/color/dist/style.css';
const 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"]
]
export default function App() {
const colorRef = useRef();
const buttonRef = useRef();
return (<>