Color picker libraries to use in 2021

There is no denying the importance of colors on the web. Brands out there are identified with the help of colors as well as preferred color schemes. Thankfully, developers are provided with multiple options due to the myriad of popular color libraries by JavaScript. The color picker libraries in JavaScript are known to offer access to a wide range of color options or color codes that developers can use in their projects.

With the help of the given color picker libraries in JavaScript, you can simply play around with the varying frequency values of RGB (red, green, and blue) shades to obtain the desired frequency or color schemes.

In this article, we are going through a list of several JavaScript color picker libraries in JavaScript to learn about their features while showing a sample usage. In the end, we will compare all of the libraries’ performance, based on the library’s size as well as their relative impact on page load time.

Bootstrap Colorpicker

Bootstrap Colorpicker is a leading modular form of color picker plugin for Bootstrap. The given plugin allows you to select from a number of colors. You can easily use it in any editor functionality or product variant scenario where the end-user can select a color.

If you wish to obtain its latest version, you can ensure the same in several ways, including:

There are different color picker versions available for Bootstrap as well in the v2.x documentation and v3.x documentation. Let us see an example in action:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Color Picker</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/css/bootstrap-colorpicker.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/js/bootstrap-colorpicker.js"></script>
    <style type="text/css">
        body {
        width: 80%;
        height:80%;
        margin:auto;
        }
        #main {
        height:400px;
        }
        #color {
        margin-left: 10%;
        width:50%;
        }
  </style>
</head>
<body>
    <div id="main" class="container">
        <h1>Bootstrap Color Picker</h1>
        <input id="color" type="text" value="#269faf" class="form-control" />
    </div>
    <script type="text/javascript">
      $(function () {
        $('#color')
        .colorpicker({})
        .on('colorpickerChange', function (e) { //change the bacground color of the main when the color changes  
            new_color = e.color.toString()
            $('#main').css('background-color', new_color)
        })     
    });
</script>
</body>
</html>

React Color

React Color is a collection of color pickers from tools like Photoshop, Chrome, Sketch, Github, Material Design, Twitter, and more. There are as many as 13 color pickers to choose from. Using the given color picker in JavaScript, web designers can also look forward to creating their own color ranges by making use of the existing building block components.

The installation can be done by installing react-color with the help of NPM. Simultaneously, color components can be included in the given library with the help of importing some color picker from react-color at the component’s top and then using the same in the render function. Some of the component APIs of React Color are:

color: It is used for controlling what color remains active on the color picker. You can make use of the given component for initialing the color picker with a specific color or keeping the same in sync with the parent component’s state
onChange: You are required to pass the function for making a call every time the color gets changed. Then, the same can be used for storing the color in the parent component’s state or for making other significant transformations

Based on the color picker component you choose to import, there are several other props available to use:

import logo from './logo.svg';
import React from 'react';
import './App.css';
import { ChromePicker } from 'react-color'

class App extends React.Component {
  state = {
    background: 'rgb(0,0,0,1)',
    color:""
  };
  changeHandler = (colors) => {
    let col = 'rgb('+colors.rgb.r+','+colors.rgb.g+','+colors.rgb.b+','+colors.rgb.a+')'
    this.setState({ background: col, color:colors.rgb });
  };

  render() {
    return (
      <div id="main" style={{backgroundColor: this.state.background}}>
      <h1>React-Color Library</h1>
      <ChromePicker
        className="picker"
        color={ this.state.color }
        onChange={ this.changeHandler }
      />
      </div>
    );
  }
}
export default App;

Pickr

Pickr serves to be a simple, flat, responsive, hackable, and multi-themed color picker for JavaScript. With the help of this color picker, there is no requirement of using any dependencies or jQuery. Moreover, the given color picker is also highly compatible with all the available CSS frameworks.

Pickr is known to help you in the creation of a highly elegant, touch-enabled, and customizable color picker for your website or app. The given color picker is capable of supporting RGB, HEX, HSV, HSL, CMYK color codes. At the same time, the Pickr color picker is also known to provide a specific function that is capable of converting the default color codes or values (HSVa) to the respective RGBa, HSLa, CMYK, and HEX values. The given color picker is known to provide support to both node.js and the browser.

If you wish to make use of the same color picker in your JavaScript library to add colors, here are some steps to follow:

Install the Pickr using NPM
Add the JavaScript of Pickr to the page
Add a specific theme CSS to the given page
Create a well-defined container element for placing the color picker
Initialize the color picker for generating the default color picker
Customize the given position of the color picker upon being triggered

Consider the example given below:

<!DOCTYPE html>
<html>
  <head>
    <title>Pickr library</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"
    />
    <!-- 'classic' theme -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"
    />
    <!-- 'monolith' theme -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"
    />
    <!-- 'nano' theme -->
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/pickr.min.js"></script>
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #main {
        height: 400px;
      }
      .pickr {
        margin-top: -3%;
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Pickr library</h1>
      <p>Select Button</p>
      <div id="color_input"></div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        const pickr = Pickr.create({
          el: "#color_input",
          theme: "monolith",
          components: {
            preview: true,
            opacity: true,
            hue: true,
            // Input / output Options
            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          }
        });
        //change the color of the main div when color changes
        pickr.on("change", function (e) {
          $("#main").css("backgroundColor", e.toRGBA());
        });
      });
    </script>
  </body>
</html>

In addition to these popular color pickers, some more options for the developers are:

colorPicker

colorPicker is a highly intuitive, lightweight, and compatible JavaScript framework that serves as an independent color picking tool. It features multiple capabilities for covering color conversions as well as calculations such as color difference, layer mix, and contrast. colorPicker tool is capable of fully supporting even the bad range of color spaces. Whatever your requirement might be –RGB, HSV, HSL, CMY, CMYK, HEX, XYZ, and more, the tool is capable of delivering the desired results to you. Let’s see an example:

<!DOCTYPE html>
<html>
<head>
    <title>colorPicker library</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style type="text/css">
    body {
    width: 80%;
    height:80%;
    margin:auto;
    }
    #main {
    height:400px;
    }
    #color {
      margin-left: 30%;
    }
  </style>
</head>
<body>
    <div id="main">
    <h1>colorPicker library</h1>
    <input  id = "color" type="text">
    </div>

    <script type="text/javascript" src="../colors.js"></script>
    <script type="text/javascript" src="../colorPicker.data.js"></script>
    <script type="text/javascript" src="../colorPicker.js"></script>
    <script type="text/javascript" src="jsColor.js"></script>

    <script  type="text/javascript">
     $(document).ready(function () {

        //find the page loading time
        var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart
        console.log("Load Time:",loadTime)
        var colors = jsColorPicker('#color', {
            size: 2,
            readOnly: false,
            init: function(elm, colors) {},
            renderCallback: function(colors, mode){ //change the background of the main div when the color is selected
                document.getElementById("main").style.backgroundColor = "#"+colors.HEX
                document.getElementById("color").value = "#"+colors.HEX

            }

        });
    });

</script>
</body>
</html>

evol-colorpicker

evol-colorpicker is an adaptable JavaScript library for color picker capabilities that can be used inline. evol-colorpicker is known to push the right buttons as far as ensuring transparent color support, color history tracking, and color palette selection is concerned.

As the given color picker is a fully-fledged UI (user Interface) widget, it is also known to be available with configurations and themes that can be tweaked easily for suiting your preferences. Have a look at the example below:

<!DOCTYPE html>
<html>
  <head>
    <title>Evol Color Picker library</title>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/evol-colorpicker.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/evol-colorpicker.css"
    />
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #main {
        height: 400px;
      }
      .evo-cp-wrap {
        margin-left: 30%;
      }
      div.evo-pointer.evo-colorind {
        border-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Evol Color Picker library</h1>
      <input id="color" type="text" />
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#color").colorpicker({
          color: "#ffffff", //initial color
          defaultPalette: "theme", //theme or web
          transparentColor: true //user can select transparent colors
        });
        //change the main background of the div when the color is selected
        $("#color").on("change.color", function (event, color) {
          $("#main").css("background-color", color);
        });
      });
    </script>
  </body>
</html>

JSColor

JSColor is one of the leading web-based color pickers that aims at giving the designers and developers the best-ever experience during installation and end of use for the given component. The overall ease of use and its simplicity makes the given color picker highly preferred amongst the users. JSColor is known to provide support to all browsers, including Chrome, Safari, Internet Explorer 7 and above, Mozilla, Opera, and more. Let us see an example in action:

<!DOCTYPE html>
<html>
  <head>
    <title>Jscolor library</title>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.0/jscolor.js"></script>
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #main {
        height: 400px;
      }
      p {
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Jscolor library</h1>
      <p>
        Color: <input id="color" value="rgba(255,160,0,0.5)" data-jscolor="" />
      </p>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        //change the main background of the div when the color is changed
        $("#color").on("change", function (e) {
          color = $(this).val();
          $("#main").css("backgroundColor", color);
        });
      });
    </script>
  </body>
</html>

Farbtastic

Farbtastic helps in presenting you with a specialized color-picking plugin for adding a single or even multiple color picker widget onto the web project. This is achieved with the help of JavaScript. As you would link each widget to existing elements like text fields, the element value is going to be updated automatically upon picking some color. Let’s see it in action:

<!DOCTYPE html>
<html>
  <head>
    <title>Farbtastic Color Picker library</title>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/farbtastic.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/farbtastic.css"
    />
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #color {
        margin-left: 30%;
      }
      #colorpicker {
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Farbtastic Color Picker library</h1>
      <input id="color" type="text" />
      <div id="colorpicker"></div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        var obj = $.farbtastic("#colorpicker", "#color"); //placeholder, callback
        obj.linkTo(function (event) {
          //linking a callback function that changes the background color of the main div
          $("#main").css("backgroundColor", event);
          $("#color").val(event);
        });
      });
    </script>
  </body>
</html>

colorjoe

colorjoe is a highly scalable color picker. It offers you the overall ease of instant color picking. With this tool, you can get RGB as well as other color codes or values upon selecting and clicking on the available color selection area. The scalability offered by colorjoe is immensely functional. This is because it’s not dependent on eternal images and is known to be based on CSS. Therefore, you can go ahead and modify the size of colorjoe by utilizing CSS to suit individual needs:

<!DOCTYPE html>
<html>
  <head>
    <title>ColorJoe library</title>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/colorjoe.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/colorjoe.js"></script>
    <style type="text/css">
      body {
        width: 80%;
        height: 80%;
        margin: auto;
      }
      #main {
        height: 600px;
      }
      #color {
        margin-left: 30%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>ColorJoe library</h1>
      <div id="colorpicker"></div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        const joe = colorjoe.rgb("colorpicker", "red", [
          "hex",
          ["fields", { space: "RGB", limit: 255, fix: 0 }],
          "currentColor"
        ]);
        //change the background color of the main div when color changes
        joe
          .on("change", function (c) {
            $("#main").css("backgroundColor", c.css());
          })
          .update();
      });
    </script>
  </body>
</html>

Performance test

The page loading time of the above color picker libraries is given in the table below. It shows an average of 10 tests.

Library	Page loading time in milliseconds	Download size
Bootstrap Colorpicker	170.4	1.92 MB
React Color	444.1	1.35 MB
Pickr	120.3	367.97 KB
colorPicker	189.5	–
evol-colorpicker	181.2	4.33 MB
JSColor	131.9	1.16KB
Farbtastic	129.1	32.60 KB
colorjoe	145.9	238.12 KB

Sources

https://github.com/casesandberg/react-color

https://github.com/Simonwep/pickr

https://github.com/itsjavi/bootstrap-colorpicker

https://github.com/PitPik/colorPicker

https://github.com/evoluteur/colorpicker

https://github.com/mattfarina/farbtastic

https://github.com/bebraw/colorjoe

Get setup with LogRocket's modern error tracking in minutes:Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.
NPM
Script Tag
$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');
Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
(Optional) Install plugins for deeper integrations with your stack:Redux middleware
ngrx middleware
Vuex plugin
Get started now

Color picker libraries to use in 2021

Bootstrap Colorpicker

React Color

Pickr

colorPicker

evol-colorpicker

JSColor

Farbtastic

colorjoe

Performance test

Sources

Get setup with LogRocket's modern error tracking in minutes:

Exploring React Native pointer events

Next.js 13 and React Suspense: Create a loading component

A guide to cross-compilation in Rust

Leave a Reply Cancel reply

Color picker libraries to use in 2021

Performance test

Sources

Get setup with LogRocket's modern error tracking in minutes:

Share this:

Leave a Reply Cancel reply