7 JavaScript Color Libraries and Which Should You Choose

This article was originally published on my personal blog.

When it comes to JavaScript, there's a ton of libraries that allow you to do basically almost anything. This will be the start of a new series of X JavaScript libraries to do something. This series will not just present libraries with a link and a brief description. This series will showcase the pros and cons of the libraries, and why you should consider one over the other.

To start us off, in this article I'll share with you 7 JavaScript libraries that allow you to manipulate colors one way or another.

color2k

Perhaps the biggest pro of color2k is its small size. At 2.9KB of size, color2k provides a set of functionalities that will allow you to parse and manipulate colors.

This library provides different useful methods including converting colors like toHex or toRgba, color manipulation like darken or mix, and more methods that allow you to parse colors.

This library is easy to use in your Node.js projects. All you need is to install it:

npm i color2k

Then import the methods you want to use:

import { mix } from color2k;

The con of using this library is it can be limited when it comes to heavy color manipulation needs, which can be provided by other libraries.

When Should You Use color2k?

color2k is the perfect option if you're looking for a small and easy-to-use library that allows you to perform basic manipulation and parsing methods. If you're looking for a library to provide you with more options, then you should probably check out other libraries on this list.

chroma.js

If you're looking for a library that can give you more methods to manipulate and interpolate colors, then you should check out chroma.js. chroma.js, compared to color2k, provides a lot of methods to not only parse and convert colors but also perform a lot of operations on colors.

In addition, chroma.js provides methods like scale that allow you to represent a color scale between two or more colors. You can also retrieve a color scheme using the cubehelix method.

Using this library is easy as well. You first need to install it in your Node.js project:

npm install chroma-js

Then, import it where you need to use it:

import chroma from "chroma-js";

And you'll have access to all the methods you need.

The biggest con about chroma.js is the fact that it has probably the biggest size compared to other libraries on this list, with the size 13.5KB.

When Should You Use chroma.js?

If you need a library that allows you to perform wide operations on colors then chroma.js is the one for you. If you, however, need to perform small operations, or you don't want to use a library with a relatively bigger size, then you should probably use another library from this list.

Color Thief

Color Theif is different than other mentioned libraries in this article. Color Thief has only one purpose which is getting colors from a picture. You can use Color Thief either in your browser or in Node.

To use it in your browser you can either download from the repository the files under dist. Alternatively, you can use their CDN.

After you include the script to the file, you just need to create a new instance to use:

const colorThief = new ColorThief();

To use it in Node, you just need to install it:

npm i --save colorthief

And then require it:

const ColorThief = require('colorthief')

The library exposes 2 methods. The first is getColor which allows you to retrieve the dominant color in an image. The second is getPalette which allows you to retrieve all the colors in an image.

The biggest cron about this library is that it hasn't been updated since 2020. So, it doesn't seem like there will be ongoing bug or security fixes. You should consider that when using this library.

When Should You Use Color Thief?

As Color Thief has only one purpose, it's pretty obvious that it should be used when you need that purpose. If you need a library to extract colors from an image, then Color Thief is a great option.

color

color is another library that provides a wide set of methods to be used to manipulate and convert colors. One of color's pros is that it supports CSS string colors like rgb(255, 255, 255).

color has a wide set of color getters like red which returns the red value of a color or hsl which retrieves the HSL value of a color. color also provides a wide set of manipulation methods like desaturate and lighten.

The installation and usage are easy. You can install color with NPM:

npm install color

Then, require it where you need to use it:

const Color = require('color');

and you'll have access to all its methods.

color's manipulation and interpolation methods are not as many as chroma.js, but it has a smaller size (7.6KB).

When Should You Use color?

If you're looking for a color manipulation library that has more to offer than color2k and less size than chroma.js that can still satisfy your needs, then you should go for color.

Random Color

Random Color is another library with a single purpose. Using Random Color, you can generate (you guessed it) random colors. However, it's not just that. You can also specify the number of options like hue, format, and luminosity to make the color generated not too random.

You can install this package from NPM:

npm install randomcolor

And require it where you need to use it:

var randomColor = require('randomcolor')

Alternatively, you can use it in your browser using their CDN.

This library exposes one function only which is the randomColor function. This function receives optionally an options object.

When Should You Use Random Color?

As it's a single-purpose library with a tiny size (2.1KB), it's perfect for when all you need is to generate a random color.

ac-colors

ac-colors is a library that provides methods to parse and convert colors. It also provides methods to generate random colors. Although it doesn't provide a lot of options like Random Color when generating colors, it provides different methods to generate color in a certain format like randomOfTypeFormatted.

ac-colors can be used in the browser using their CDN.

Alternatively, you can install it with NPM:

npm install ac-colors

Then requiring it:

const Color = require("ac-colors");

There are many functions in the library that allow so many different types of conversions and parsing of colors, as well as functions to generate random colors.

When Should You Use ac-colors?

ac-colors combines a bunch of methods from different libraries mentioned in this list. It's also a small library (3KB). It doesn't however provide functions to manipulate colors. So, if you need a library to convert and parse colors as well as generate random colors, then it's a good candidate.

TinyColor

TinyColor can be used in both your browser and Node. It's mostly a library that allows you to know more about colors, with functions like isLight. However, it still provides color manipulation functions like brighten and darken. On top of all of that, it allows you to generate color palettes and random colors.

As mentioned earlier, you can use TinyColor in the browser.

Alternatively, you can install it with NPM:

npm install tinycolor2

and require it where you need it:

var tinycolor = require("tinycolor2");

TinyColor is relatively small (5KB) with the number of functionalities it provides.

Something that should be considered when choosing TinyColor is that it hasn't been updated since April 2021. So, it doesn't seem like it will receive any bug or security fixes in the future.

When Should You Use TinyColor?

TinyColor is perfect for when you need the best of everything. As it provides a combination of most functionalities we saw in other libraries, it's a good option if you need a library for a variety of uses. TinyColor is also a good option if you're looking for a library to use in the browser (without NPM), as a lot of the mentioned libraries don't offer that.

It doesn't, however, provide a wide set of manipulation functionalities like chroma.js.

Conclusion

In this article, I shared some of the good JavaScript libraries that will allow you to manipulate, parse, convert, or perform other operations on colors.

Be sure to check out upcoming part of the series where we take a look at other libraries for specific functionalities to help you decide when you should use what.