• Color Scales in JavaScript with chroma.js
  • By Joe T. Santhanavanich
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: zenblo
  • Proofread by: LSvih

JavaScript color processing library Chroma.js application

Many developers use CSS to design color codes and scales, selecting colors from some online palette. However, it’s not everyone’s favorite tool. The good news is that we have chroma.js, which is a very small library for generating levels in JavaScript code. This means you can plug it directly into your JavaScript code framework!

Let’s get started!

Start the installation

In Web applications, links to CDNJS can be used in HTML documents.

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script>
Copy the code

Alternatively, you can install it using NPM.

$ npm install chroma-js
Copy the code

Sample usage

You simply use the chroma.scale([<color1>,<color2>,…,<color n>]) function in your JavaScript code, which will create levels between the specified colors.

For example, you can use the following JavaScript code to create a color scale from yellow to red:

varColor_scale = chroma. Scale ([' yellow ', 'red']);Copy the code

You can then access colors in RGB or hexadecimal code by:

color_scale(0).rgb()    / / [255, 255, 0]
color_scale(0.1).rgb()  / / [255, 230, 0]
color_scale(0.2).rgb()  / / [255, 204, 0]
color_scale(0.3).rgb()  / / [255, 179, 0]. color_scale(1.0).rgb()  / / [255, 0, 0]

===================================

color_scale(0).hex()    // "#ffff00"
color_scale(0.1).hex()  // "#ffe600"
color_scale(0.2).hex()  // "#ffcc00"
color_scale(0.3).hex()  // "#ffb300". color_scale(1.0).hex()  // "#ff0000"
Copy the code

You can perform more options with levels, such as blending more color codes based on ColorBrewer levels.

Here are some more examples:

chroma.scale('Spectral');
Copy the code

chroma.scale('RdPu');
Copy the code

chroma.scale('RdPu').domain([1.0]); // Invert the levels
Copy the code

Application of summary

If you like this color manipulation library, you can find more advanced tutorials, such as combining color manipulation in zoom methods, at gka.github. IO /chroma.js/. Overall, I hope you enjoyed this article and were able to apply this color manipulation library to your applications or projects.

Keep healthy and healthy! Happy writing code!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.