{"id":22649,"date":"2023-08-21T10:11:43","date_gmt":"2023-08-21T08:11:43","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=22649"},"modified":"2023-08-21T10:11:45","modified_gmt":"2023-08-21T08:11:45","slug":"the-best-color-manipulation-library-in-javascript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/","title":{"rendered":"The Best Color Manipulation Library in JavaScript"},"content":{"rendered":"\n<p>SASS comes with functions to programmatically modify colors, such as\u00a0<code>lighten()<\/code>\u00a0and\u00a0<code>darken()<\/code>. These provide a practical approach to color manipulation in CSS. But what if you wanted to achieve the same result in plain <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/javascript-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a>?<\/p>\n\n\n\n<p>Considering how popular styling HTML components in JavaScript has become, that is a now basic need. As a result, several JavaScript color library options have sprung up. Their goal is to make it easier to deal with colors in JS. Here, you will dig into&nbsp;<code>color<\/code>, the most popular one!<\/p>\n\n\n\n<p>In this article, you will find out why you need a color <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/javascript-ultimate-guide\/\" target=\"_blank\" aria-label=\"JavaScript  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">JavaScript <\/a>library, why\u00a0<code>color<\/code>\u00a0is the best one, and what features and methods it offers.<\/p>\n\n\n\n<p>Let&#8217;s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-manipulate-colors-in-javascript\">Why Manipulate Colors in JavaScript<\/h2>\n\n\n\n<p>Colors play a vital role in web design, user interface, accessibility, user experience, and data visualization. With the proper JavaScript color library, you can manipulate colors dynamically and programmatically in the frontend or backend.<\/p>\n\n\n\n<p>In detail, there are at least three real-world scenarios why dealing with colors in JavaScript is important:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set colors in JavaScript code<\/strong>: Suppose that an API returns styling information about a specific component, or that you need to change colors based on user interaction. In this case, you cannot rely on CSS. Instead, you must enforce the styling of HTML elements in the frontend via JavaScript code. For example, in React this comes down to programmatically setting the&nbsp;<code>style<\/code>&nbsp;prop.<\/li>\n\n\n\n<li><strong>Convert colors<\/strong>: HEX, RGB, RGBA, HLS, and HLSA are the main formats that web applications support for color representation. The best format to adopt changes from use case to use case. Thus, you may need to convert colors to make them easier to understand or manipulate.<\/li>\n\n\n\n<li><strong>Enhance accessibility<\/strong>: Give users the ability to select a specific theme and have all colors update accordingly. This is a great way to make applications and websites highly accessible.<\/li>\n<\/ul>\n\n\n\n<p>Now, the question is, \u201cIs there a library for all this in JavaScript?\u201d Yes, there is, and it is called&nbsp;<code>color<\/code>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-the-javascript-color-library\">What Is the JavaScript&nbsp;<code>color<\/code>&nbsp;Library?<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/Qix-\/color\"><code>color<\/code><\/a>&nbsp;is a JavaScript library for converting and manipulating colors. The npm package has more than 15 million weekly downloads, making it the most popular color manipulation library among all available alternatives.<\/p>\n\n\n\n<p><code>color<\/code>&nbsp;exposes a&nbsp;<code>Color()<\/code>&nbsp;constructor that accepts a color in several formats:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ CSS color strings<\/span>\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"red\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"rgb(255, 0, 0)\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"#FF0000\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"hsl(0, 100%, 50%)\"<\/span>)\n\n<span class=\"hljs-comment\">\/\/ object<\/span>\n<span class=\"hljs-keyword\">const<\/span> color = Color({<span class=\"hljs-attr\">r<\/span>: <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-attr\">g<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">b<\/span>: <span class=\"hljs-number\">0<\/span>})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Behind the scene, string constructors are handled with the&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/color-string\"><code>color-string<\/code><\/a>&nbsp;package.<\/p>\n\n\n\n<p>The object returned by&nbsp;<code>Color()<\/code>&nbsp;exposes several color conversion and manipulation methods. These are immutable as they always return a new color object, without changing the original data structure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-color-in-javascript\">Using&nbsp;<code>color<\/code>&nbsp;in JavaScript<\/h2>\n\n\n\n<p>Let us now look at the features offered by&nbsp;<code>color<\/code>&nbsp;to implement color manipulation operations effortlessly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"get-started\">Get Started<\/h3>\n\n\n\n<p>Install the&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/color\"><code>color<\/code><\/a>&nbsp;npm package with:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install color<\/code><\/span><\/pre>\n\n\n<p>If you are a TypeScript user, you will also need to install the type declaration with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@types<\/span>\/color<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, you can import&nbsp;<code>color<\/code>&nbsp;in Node.js with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> Color = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"color\"<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or, as an ES module with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> Color <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"color\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As mentioned before,&nbsp;<code>Color<\/code>&nbsp;is a constructor function that accepts a color representation in many formats and returns an object that exposes several useful methods. Time to see them in action!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"rgb-to-hex-and-hex-to-rgb\">RGB to HEX and HEX to RGB<\/h3>\n\n\n\n<p>You can convert a color from RGB to HEX in JavaScript with&nbsp;<code>color<\/code>&nbsp;as in the example below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> blueRGB = <span class=\"hljs-string\">\"rgb(0, 0, 255)\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> blue = Color(blueRGB)\n<span class=\"hljs-keyword\">const<\/span> blueHEX = blue.hex().toString()\n<span class=\"hljs-built_in\">console<\/span>.log(blueHEX) <span class=\"hljs-comment\">\/\/ \"#0000FF\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The&nbsp;<code>hex()<\/code>&nbsp;method returns a color object with data stored in HEX format. In particular, if you log&nbsp;<code>blue.hex()<\/code>&nbsp;with&nbsp;<code>console.log()<\/code>, you will see:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">{ <span class=\"hljs-attribute\">model<\/span>: <span class=\"hljs-string\">'rgb'<\/span>, color: &#91; <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">255<\/span> ], valpha: <span class=\"hljs-number\">1<\/span> }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then,&nbsp;<code>toString()<\/code>&nbsp;transforms that object into a human-readable&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\">CSS color string<\/a>.<\/p>\n\n\n\n<p>Similarly, you can go from HEX to RGB in JavaScript with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> blueHEX = <span class=\"hljs-string\">\"#0000FF\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> blue = Color(blueHEX)\n<span class=\"hljs-keyword\">const<\/span> blueRGB = blue.rgb().toString()\n<span class=\"hljs-built_in\">console<\/span>.log(blueRGB) <span class=\"hljs-comment\">\/\/ \"rgb(0, 0, 255)\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, you need to rely on the&nbsp;<code>rgb()<\/code>&nbsp;method instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"convert-a-color-to-a-different-space\">Convert a Color to a Different Space<\/h3>\n\n\n\n<p><code>color<\/code>&nbsp;offers several methods to convert from one color space to another. As of this writing, these space color conversation methods are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>rgb()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/RGB_color_model\">RGB<\/a>.<\/li>\n\n\n\n<li><code>hsl()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV\">HSL<\/a>.<\/li>\n\n\n\n<li><code>hsv()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV\">HSV<\/a>.<\/li>\n\n\n\n<li><code>hwb()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HWB_color_model\">HWB<\/a>.<\/li>\n\n\n\n<li><code>cmyk()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CMYK_color_model\">CMYK<\/a>.<\/li>\n\n\n\n<li><code>xyz()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CIE_1931_color_space\">CIE XYZ<\/a>.<\/li>\n\n\n\n<li><code>lab()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CIELAB_color_space\" class=\"ek-link\">L*a*b<\/a>.<\/li>\n\n\n\n<li><code>lch()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HCL_color_space\">LCH<\/a>.<\/li>\n\n\n\n<li><code>ansi16()<\/code>: To convert a color from any supported color space to 16 ANSI.<\/li>\n\n\n\n<li><code>ansi256()<\/code>: To convert a color from any supported color space to 256 ANSI.<\/li>\n\n\n\n<li><code>hcg()<\/code>: To convert a color from any supported color space to&nbsp;<a href=\"https:\/\/github.com\/d3\/d3-hcg\">HCG<\/a>.<\/li>\n\n\n\n<li><code>apple()<\/code>: To convert a color from any supported color space to the&nbsp;<a href=\"https:\/\/support.apple.com\/guide\/motion\/about-color-space-motn3f5342e9\/mac\">Apple color space<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"check-if-a-color-is-light-or-dark\">Check If a Color Is Light or Dark<\/h3>\n\n\n\n<p>To evaluate whether a color is light or dark, you can simply use the&nbsp;<code>isLight()<\/code>&nbsp;method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> lightBlue = Color(<span class=\"hljs-string\">\"lightblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isLight()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or the opposite&nbsp;<code>isDark()<\/code>&nbsp;method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> darkBlue = Color(<span class=\"hljs-string\">\"darkblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isDark()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Note that if&nbsp;<code>isLight()<\/code>&nbsp;returns&nbsp;<code>true<\/code>,&nbsp;<code>isDark()<\/code>&nbsp;will return&nbsp;<code>false<\/code>&nbsp;and vice versa:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> lightBlue = Color(<span class=\"hljs-string\">\"lightblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isLight()) <span class=\"hljs-comment\">\/\/ true<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isDark()) <span class=\"hljs-comment\">\/\/ false<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> darkBlue = Color(<span class=\"hljs-string\">\"darkblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isLight()) <span class=\"hljs-comment\">\/\/ false<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isDark()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Under the hood, these two methods rely on the&nbsp;<a href=\"https:\/\/24ways.org\/2010\/calculating-color-contrast\">YIQ equation for calculating color contrast<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"manipulate-colors\">Manipulate Colors<\/h3>\n\n\n\n<p>Other useful methods to manipulate colors offered by&nbsp;<code>color<\/code>&nbsp;are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>lighten()<\/code>: To lighten a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.lighten(<span class=\"hljs-number\">0.3<\/span>) <span class=\"hljs-comment\">\/\/ #4D4DFF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>darken()<\/code>: To darken up a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.darken(<span class=\"hljs-number\">0.2<\/span>) <span class=\"hljs-comment\">\/\/ #0000CC<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>lightness()<\/code>: To Set the lightness of a color to a specific value.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.lightness(<span class=\"hljs-number\">35<\/span>) <span class=\"hljs-comment\">\/\/ #0000B3<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>saturate()<\/code>: To saturate a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.saturate(<span class=\"hljs-number\">1<\/span>) <span class=\"hljs-comment\">\/\/ #0000FF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>desaturate()<\/code>: To desaturate a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.desaturate(<span class=\"hljs-number\">0.5<\/span>) <span class=\"hljs-comment\">\/\/ #4040BF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>whiten()<\/code>: To whiten a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.whiten(<span class=\"hljs-number\">0.1<\/span>) <span class=\"hljs-comment\">\/\/ #BEDCE6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>blacken()<\/code>: To darken a color by a specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.blacken(<span class=\"hljs-number\">1<\/span>) <span class=\"hljs-comment\">\/\/ #ADC5CD<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>rotate()<\/code>: To apply a&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter-function\/hue-rotate\">hue rotation<\/a>&nbsp;on a color by a specified degree.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.rotate(<span class=\"hljs-number\">180<\/span>) <span class=\"hljs-comment\">\/\/ #FFFF00<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>fade()<\/code>: To fade a color by a specified percentage<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.fade(<span class=\"hljs-number\">0.2<\/span>) <span class=\"hljs-comment\">\/\/ #ADD8E6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>opaquer()<\/code>: To make a color more or less opaque based on the specified percentage.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.opaquer(<span class=\"hljs-number\">0.8<\/span>) <span class=\"hljs-comment\">\/\/ #ADD8E6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>grayscale()<\/code>: To get the grayscale equivalent of the current color.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.grayscale() <span class=\"hljs-comment\">\/\/ #1C1C1C<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Paste the resulting color in the JavaScript comment in a&nbsp;<a href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\">HEX color visualizer<\/a>&nbsp;to see the effects of each method.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"other-getters\">Other Getters<\/h3>\n\n\n\n<p><code>color<\/code>&nbsp;also provides many getter methods to get specific information about a color:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>red()<\/code>: To get the \u201cred\u201d component of the color in the RGB space.<\/li>\n\n\n\n<li><code>green()<\/code>: To get the \u201cgreen\u201d component of the color in the RGB space.<\/li>\n\n\n\n<li><code>blue()<\/code>: To get the \u201cblue\u201d component of the color in the RGB space.<\/li>\n\n\n\n<li><code>alpha()<\/code>: To get the \u201calpha\u201d component of the color in the RGBA space.<\/li>\n\n\n\n<li><code>lightness()<\/code>: To get the lightness of the color according to the HSL space.<\/li>\n\n\n\n<li><code>keyword()<\/code>: To get the CSS name of the color.<\/li>\n\n\n\n<li><code>cyan()<\/code>: To get the \u201ccyan\u201d component of the color in the CMY space.<\/li>\n\n\n\n<li><code>magenta()<\/code>: To get the \u201cmagenta\u201d component of the color in the CMY space.<\/li>\n\n\n\n<li><code>yellow()<\/code>: To get the \u201cyellow\u201d component of the color in the CMY space.<\/li>\n\n\n\n<li><code>black()<\/code>: To get the \u201cblack\u201d component of the color in the CMYK space.<\/li>\n\n\n\n<li><code>x()<\/code>: To get the \u201cx\u201d component of the color in the CIE XYZ space.<\/li>\n\n\n\n<li><code>y()<\/code>: To get the \u201cy\u201d component of the color in the CIE XYZ space.<\/li>\n\n\n\n<li><code>z()<\/code>: To get the \u201cz\u201d component of the color in the CIE XYZ space.<\/li>\n\n\n\n<li><code>l()<\/code>: To get the \u201cL\u201d component of the color in the L*a*b space.<\/li>\n\n\n\n<li><code>a()<\/code>: To get the \u201ca\u201d component of the color in the L*a*b space.<\/li>\n\n\n\n<li><code>b()<\/code>: To get the \u201cb\u201d component of the color in the L*a*b space.<\/li>\n<\/ul>\n\n\n\n<p>With all these methods, dealing with color manipulation in JavaScript has never been easier!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>In this article, you looked at how having the ability to deal with colors directly in JavaScript is so important. As seen here, the JavaScript&nbsp;<code>color<\/code>&nbsp;library comes equipped with everything you need to perform color manipulation and conversion.<\/p>\n\n\n\n<p>Through several examples, you had the opportunity to understand how to use&nbsp;<code>color<\/code>&nbsp;in real-world scenarios. Converting from HEX to RGB and vice versa is now a piece of cake!<\/p>\n\n\n\n<p>Thanks for reading! We hope you found this article helpful!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SASS comes with functions to programmatically modify colors, such as\u00a0lighten()\u00a0and\u00a0darken(). These provide a practical approach to color manipulation in CSS. But what if you wanted to achieve the same result in plain JavaScript? Considering how popular styling HTML components in JavaScript has become, that is a now basic need. As a result, several JavaScript color&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\">Read more<\/a><\/p>\n","protected":false},"author":160,"featured_media":22665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[8],"tags":[10838],"collections":[],"class_list":{"0":"post-22649","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-color-manipulation","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Color Library: An Introductory Guide - Codemotion<\/title>\n<meta name=\"description\" content=\"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Best Color Manipulation Library in JavaScript\" \/>\n<meta property=\"og:description\" content=\"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-21T08:11:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T08:11:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1253\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"The Best Color Manipulation Library in JavaScript\",\"datePublished\":\"2023-08-21T08:11:43+00:00\",\"dateModified\":\"2023-08-21T08:11:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\"},\"wordCount\":1298,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"keywords\":[\"color manipulation\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\",\"name\":\"JavaScript Color Library: An Introductory Guide - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"datePublished\":\"2023-08-21T08:11:43+00:00\",\"dateModified\":\"2023-08-21T08:11:45+00:00\",\"description\":\"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"width\":1253,\"height\":836,\"caption\":\"Script coding and programming in php, python, javascript, other languages. Cartoon professional programmer working with laptop online among windows and programs flat vector illustration. Code concept\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"The Best Color Manipulation Library in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Color Library: An Introductory Guide - Codemotion","description":"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"The Best Color Manipulation Library in JavaScript","og_description":"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-08-21T08:11:43+00:00","article_modified_time":"2023-08-21T08:11:45+00:00","og_image":[{"width":1253,"height":836,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"The Best Color Manipulation Library in JavaScript","datePublished":"2023-08-21T08:11:43+00:00","dateModified":"2023-08-21T08:11:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/"},"wordCount":1298,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","keywords":["color manipulation"],"articleSection":["JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/","name":"JavaScript Color Library: An Introductory Guide - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","datePublished":"2023-08-21T08:11:43+00:00","dateModified":"2023-08-21T08:11:45+00:00","description":"A key asset to convert and manipulate colors in plain JS. Read this article to discover more about the JavaScript color library!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","width":1253,"height":836,"caption":"Script coding and programming in php, python, javascript, other languages. Cartoon professional programmer working with laptop online among windows and programs flat vector illustration. Code concept"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/the-best-color-manipulation-library-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/"},{"@type":"ListItem","position":4,"name":"The Best Color Manipulation Library in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",100,67,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"SASS comes with functions to programmatically modify colors, such as\u00a0lighten()\u00a0and\u00a0darken(). These provide a practical approach to color manipulation in CSS. But what if you wanted to achieve the same result in plain JavaScript? Considering how popular styling HTML components in JavaScript has become, that is a now basic need. As a result, several JavaScript color&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=22649"}],"version-history":[{"count":11,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22649\/revisions"}],"predecessor-version":[{"id":22666,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22649\/revisions\/22666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/22665"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=22649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=22649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=22649"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=22649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}