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.

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

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

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

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.

<!-- codesandbox: https://codesandbox.io/p/sandbox/gifted-kowalevski-d6xyjy -->
<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"/>

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

Edit this page on GitHub

Jspreadsheet Pro