JavaScript Color Picker

The jSuites.color 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

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

Method	Description
color.open();	Open the color picker
color.close(boolean);	Close the color picker @param int ignoreEvents - Do no execute onclose event
color.getValue();	Get the current value of the color picker
color.setValue(string);	Set a new value to the color picker @param hex newColor - Set a new value

Events

Method	Description
onchange	Method executed when a value is changed. (HTMLElement element, String color) => void
onclose	Method executed when the color picker is closed. (HTMLElement element) => void
onopen	Method executed when the color picker is opened. (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
resetLabel: string	Label for the reset button

Examples

Web Component Color Picker

Create a color picker as a web component:

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<script src="https://jsuites.net/v5/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<jsuites-color value="#009688"></jsuites-color>
<script>
document.querySelector('jsuites-color').addEventListener('onchange', function(e) {
    // Set the font color
    e.target.children[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);
});
</script>
</html>

Color Picker

A basic javascript color picker event bound to an HTML input element.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<input id="basic-color-picker"/>
<script>
let color = jSuites.color(document.getElementById('basic-color-picker'), {
    onchange: function(e, color) {
        // Set the font color
        e.style.color = color;
        // Show on console
        console.log('New value:' + color);
    }
});
</script>
</html>

import { Color } from 'jsuites/react'
import { useRef } from 'react'

import 'jsuites/dist/jsuites.css'

function App() {
    const color = useRef(null);

    const onChange = function(e, color) {
        // Set the font color
        e.style.color = color;
        // Show on console
        console.log('New value:' + color);
    }

    return (
        <div className="App">
            <Color ref={color} value={'#009688'} onchange={onChange} />
        </div>
    );
}

export default App;

<template>
    <Color value="#009688" :onchange="onChange" />
</template>

<script>
import { Color } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Color
    },
    methods: {
        onChange: function(e, color) {
            // Set the font color
            e.style.color = color;
            // Show on console
            console.log('New value:' + color);
        }
    }
};
</script>

Custom Colors

Create a color input with custom colors:

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<input id="custom-color-picker"/>
<script>
jSuites.color(document.getElementById('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>

import { Color } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'


function App() {
    const color = useRef(null);

    return (
        <div className="App">
            <Color ref={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'],
            ]} />
        </div>
    );
}

export default App;

<template>
    <Color :palette="palette" />
</template>

<script>
import { Color } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Color
    },
    data() {
        return {
            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>