jQuery and Bootstrap color picker sliders

A nice, responsive and touch-friendly, Bootstrap color picker sliders based on jQuery.

Bootstrap color picker sliders as easy to use plugin

The solution allows to implement, in a very easy way, a various kind color picker sliders. RGB Color and opacity Picker, HSL, HSV, and more.

The solution is a Bootstrap 3 optimized, advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices.

Create a responsive color selector with HSV, HSL, RGB and CIE-Lch (which supports human perceived lightness) selectors and color swatches. Full featured popover (HSV panel, HSL and RGB sliders, color swatches).

And this is not the end of the possibilities.

Demo: jQuery and Bootstrap color picker sliders
Demo: jQuery and Bootstrap color picker sliders

A simple example – HSV flat:

<div id="hsvflat"></div>
        color: "rgb(36, 170, 242)",
        flat: true,
        sliders: false,
        swatches: false,
        hsvpanel: true

Example 2 – HSL and CIE Lch sliders with customizable color swatches (flat rendering):

<div id="hslflat"></div>
        color: "rgb(36, 170, 242)",
        flat: true,
        order: {
            hsl: 1,
            cie: 2,
            preview: 3

License: Apache License, Version 2.0

Project website with docs:


Get Bootstrap color picker sliders plugin from GitHub:


You may also like:

jQuery product colorizer plugin