Documentation keyboard_arrow_right Plugins keyboard_arrow_right Color picker

JavaScript Color Picker

JavaScript Components

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 offers:

  • Lightweight vanilla JavaScript
  • No build tools required
  • Simple API
  • Framework compatible (React, Angular, Vue)
  • Mobile-optimized

Explore jSuites 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

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>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />

<div id="root"></div>

<script>
Color(document.getElementById("root"), {
    type: 'inline',
})
</script>
</html>

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`<Color type="inline" />`;
}

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 (<>
        <Color type={"inline"} ref={myRef}/>
    </>);
}

<template>
    <Color type="inline" />
</template>

<script>
import Color from '@lemonadejs/color/dist/vue';
import '@lemonadejs/color/dist/style.css';
import Tabs from '@lemonadejs/tabs/dist/vue';
import '@lemonadejs/tabs/dist/style.css';

export default {
    name: 'App',
    components: {
        Color
    }
}
</script>

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>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.css"/>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.css"/>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />

<input type="button" id="btn" value="Open"></div>

<div id="root"></div>

<script>
const root = document.getElementById("root");
const button = document.getElementById("btn");

const component = Color(root, {
    onchange: function (s, color) {
        button.style.backgroundColor = color;
    },
    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"]
    ]
});

button.addEventListener('click', () => {
  component.open();
});
</script>
</html>

// 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`<>
        <input type="button" onclick="{this.component.open}" :ref="${this.button}"></div>
        <Color :closed="true" onchange="${handleUpdate}" palette="${palette}" :ref="${this.component}" />
    </>`
}

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 (<>
        <div>
            <button onClick={() => colorRef.current.open()} ref={buttonRef}>Open</button>
            <Color
                palette={palette}
                ref={colorRef}
                onchange={(s, color) => buttonRef.current.style.backgroundColor = color}
            />
        </div>
    </>);
}

<template>
    <div>
        <button @click="this.$refs.colorRef.current.open()" ref="buttonRef">Open</button>
        <Color :palette="palette" :onchange="updateColor" ref="colorRef" />
    </div>
</template>

<script>
import Color from '@lemonadejs/color/dist/vue';
import '@lemonadejs/color/dist/style.css';

export default {
    name: 'App',
    components: {
        Color
    },
    data() {
        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 { palette }
    },
    methods: {
        updateColor(s, color) {
            this.$refs.buttonRef.style.backgroundColor = color;
        }
    }
}
</script>