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 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 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 transformationsBased 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 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:
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 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 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 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 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 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>
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 |
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
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ 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>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
