Introduction to Chroma.js
Chroma.js is a powerful library for all your color needs in JavaScript. Whether you’re looking to manipulate, analyze, or visualize colors, Chroma.js provides dozens of useful APIs to handle colors with greater flexibility and precision.
Basic Color Manipulation
Let’s start with some basic color manipulations using Chroma.js.
const chroma = require('chroma-js');
const color = chroma('red');
// Get hex value
console.log(color.hex()); // Outputs: #ff0000
// Get RGB value
console.log(color.rgb()); // Outputs: [255, 0, 0]
// Get HSL value
console.log(color.hsl()); // Outputs: [0, 1, 0.5]
Color Scales
Chroma.js allows you to create beautiful and functional color scales.
const scale = chroma.scale(['white', 'blue']);
// Get 5 colors from the scale
console.log(scale.colors(5)); // Outputs: ['#ffffff', '#bfbfff', '#8080ff', '#4040ff', '#0000ff']
Color Blending
Blend between two colors easily.
const blendedColor = chroma.mix('red', 'blue', 0.5, 'rgb');
console.log(blendedColor.hex()); // Outputs: #800080 (purple)
Color Conversion
Convert colors between different formats seamlessly.
const color = chroma('#ff0000');
console.log(color.css()); // Outputs: rgb(255, 0, 0)
console.log(color.luminance()); // Outputs: 0.2126
App Example
Below is an example of a simple web app that demonstrates the use of Chroma.js APIs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chroma.js Color Manipulation</title>
<script src="https://cdn.jsdelivr.net/npm/chroma-js"></script>
</head>
<body>
<h1>Chroma.js Color Manipulation</h1>
<div id="color-scales"></div>
<script>
const scale = chroma.scale(['red', 'yellow', 'blue']).mode('lch').colors(10);
scale.forEach((color, index) => {
const div = document.createElement('div');
div.style.backgroundColor = color;
div.style.height = '50px';
div.style.width = '100px';
div.innerText = color;
document.getElementById('color-scales').appendChild(div);
});
</script>
</body>
</html>
With this simple app, users can see a transition between multiple colors.
Chroma.js is extremely versatile and can handle almost any color-related task you throw at it. Whether you’re developing a simple web app or a complex data visualization, Chroma.js is a library worth considering.
Hash: 1f691285afded0307c1233e77efe50e86521667490f03ee7db02981fcbb51f0e
