How to Use Vibrant.js to Extract Dominant Colors from an Image
Have you ever wondered how to get the main colors of an image and use them for your design or development projects? In this blog post, I will show you how to use a JavaScript library called Vibrant.js to extract the dominant colors from an image and create a color palette that matches the image theme.
What is Vibrant.js?
Vibrant.js is a JavaScript port of the Palette class in the Android support library. The Palette class can analyze an image and generate a set of colors that represent the image’s mood and content. Vibrant.js can do the same thing in the browser or in Node.js, using the HTML canvas element and the getImageData() method.
Vibrant.js can extract six types of colors from an image:
- Vibrant: a color that is vivid and prominent
- Muted: a color that is desaturated and subdued
- DarkVibrant: a dark and vivid color
- DarkMuted: a dark and desaturated color
- LightVibrant: a light and vivid color
- LightMuted: a light and desaturated color
Each color has a population (the number of pixels in the image that belong to that color) and a swatch (an object that contains the RGB and HSL values of the color). You can use these colors to create a color palette that complements the image.
How to Use Vibrant.js?
Using Vibrant.js is very simple and straightforward. You just need to include the library in your HTML file, either by downloading it from GitHub or using a CDN like jsDelivr. For example:
HTML
This code is AI-generated. Review and use carefully. Visit our FAQ for more information.
Copy
<script src="https://cdn.jsdelivr.net/npm/node-vibrant/dist/vibrant.min.js"></script>
Then, you can use the Vibrant.from() method to create a Vibrant instance from an image source. The image source can be a URL, a File object, an Image object, or a Canvas object. For example:
JavaScript
Copy
let vibrant = Vibrant.from('path/to/image.jpg');
Next, you can use the getPalette() method to get the color palette from the image. The getPalette() method returns a promise that resolves to an object with six properties: Vibrant, Muted, DarkVibrant, DarkMuted, LightVibrant, and LightMuted. Each property is either a Swatch object or null, depending on whether the color is found or not. For example:
JavaScript
This code is AI-generated. Review and use carefully. Visit our FAQ for more information.
Copy
vibrant.getPalette()
.then((palette) => {
// Do something with the palette
console.log(palette);
})
.catch((err) => {
// Handle error
console.error(err);
});
Alternatively, you can use the getSwatches() method to get an array of Swatch objects from the image. The getSwatches() method also returns a promise that resolves to an array of six Swatch objects or nulls. For example:
JavaScript
This code is AI-generated. Review and use carefully. Visit our FAQ for more information.
Copy
vibrant.getSwatches()
.then((swatches) => {
// Do something with the swatches
console.log(swatches);
})
.catch((err) => {
// Handle error
console.error(err);
});
You can also use the getHex() method to get the hexadecimal representation of a color, or the getRgb() method to get the RGB array of a color. For example:
JavaScript
This code is AI-generated. Review and use carefully. Visit our FAQ for more information.
Copy
let swatch = palette.Vibrant; // Get the Vibrant swatch let hex = swatch.getHex(); // Get the hex value of the color let rgb = swatch.getRgb(); // Get the RGB array of the color console.log(hex); // #ff0000 console.log(rgb); // [255, 0, 0]
Example
To demonstrate how to use Vibrant.js, I will use this image of a sunset as an example:
First, I will create a Vibrant instance from the image source and get the color palette using the getPalette() method. Then, I will display the image and the palette in the HTML document using some simple CSS and JavaScript. Here is the code:
HTML
Copy
<html>
<head>
<style>
/* Style the image and the palette */
#image {
width: 500px;
height: auto;
margin: 20px;
}
#palette {
display: flex;
flex-direction: row;
margin: 20px;
}
.color {
width: 80px;
height: 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- Add the image and the palette elements -->
<img id="image" src="sunset.jpg" alt="sunset">
<div id="palette">
<div id="vibrant" class="color"></div>
<div id="muted" class="color"></div>
<div id="dark-vibrant" class="color"></div>
<div id="dark-muted" class="color"></div>
<div id="light-vibrant" class="color"></div>
<div id="light-muted" class="color"></div>
</div>
<!-- Include the Vibrant.js library -->
<script src="https://cdn.jsdelivr.net/npm/node-vibrant/dist/vibrant.min.js"></script>
<script>
// Create a Vibrant instance from the image source
let vibrant = Vibrant.from('sunset.jpg');
// Get the color palette from the image
vibrant.getPalette()
.then((palette) => {
// Display the image and the palette
let image = document.getElementById('image');
let vibrantColor = document.getElementById('vibrant');
let mutedColor = document.getElementById('muted');
let darkVibrantColor = document.getElementById('dark-vibrant');
let darkMutedColor = document.getElementById('dark-muted');
let lightVibrantColor = document.getElementById('light-vibrant');
let lightMutedColor = document.getElementById('light-muted');
image.src = 'sunset.jpg';
vibrantColor.style.backgroundColor = palette.Vibrant.getHex();
mutedColor.style.backgroundColor = palette.Muted.getHex();
darkVibrantColor.style.backgroundColor = palette.DarkVibrant.getHex();
darkMutedColor.style.backgroundColor = palette.DarkMuted.getHex();
lightVibrantColor.style.backgroundColor = palette.LightVibrant.getHex();
lightMutedColor.style.backgroundColor = palette.LightMuted.getHex();
})
.catch((err) => {
// Handle error
console.error(err);
});
</script>
</body>
</html>
Here is the result:
As you can see, Vibrant.js has successfully extracted the dominant colors from the image and created a color palette that matches the image theme. You can use these colors for your design or development projects, such as creating a website, a logo, or a poster.
Conclusion
In this blog post, I have shown you how to use Vibrant.js to extract the dominant colors from an image and create a color palette that matches the image theme. Vibrant.js is a simple and powerful JavaScript library that can analyze an image and generate a set of colors that represent the image’s mood and content. You can use Vibrant.js in the browser or in Node.js, and you can easily access the colors’ hex, RGB, and HSL values. I hope you have enjoyed this tutorial and learned something new. If you have any questions or feedback, please leave a comment below. Thank you for reading!