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:
- Downloading the ZIP file from the respective releases
- Cloning with the help of GIT
- Installing with the help of NPM
- Installing with the help of Composer
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 stateonChange: 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
Cut through the noise of traditional error reporting with LogRocket
LogRocket is a digital experience analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your applications.
Then, use session replay with deep technical telemetry to see exactly what the user saw and what caused the problem, as if you were looking over their shoulder.
LogRocket automatically aggregates client side errors, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to tell you which problems are affecting the most users and provides the context you need to fix it.
Learn more →Focus on the bugs that matter — try LogRocket today.
