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.

live

<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.

live

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