We have all seen many designs, music players in particular dynamically changing design properties according to the dominant colour (ahem 'color') of an image.
Spotify does it, Deezer does it, Youtube Music does it, and I recently did it to showcase my 2022 Spotify playlist Here. Now let's do it too!.
We start with a basic boilerplate
Then we'll code ourselves a simple HTML and CSS webpage with the Color Thief CDN link
(also available on NPM npm i --save colorthief)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Dominant color tutorial</title>
</head>
<body>
<div class="background">
<div class="image-container">
<img src="https://loremflickr.com/420/340" alt="image" crossorigin="anonymous">
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="index.js" defer></script>
</html>
CSS
body{
margin: 0;
padding: 0;
}
.background{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.image-container{
width:40vw;
height: 60vh;
background-color: #000;
}
.image-container img{
width: 100%;
height: 100%;
object-fit: cover;
}
So we should be left with a nice randomly generated kitten page
Now for the fun part, Javascript!
window.onload = () => {
getDominantImageColor = ()=>{
// get the image
let sourceImage = document.querySelector("img");
// get the background element
let background = document.querySelector(".background");
// initialize colorThief
let colorThief = new ColorThief();
// get color palette
let color = colorThief.getColor(sourceImage);
// set the background color
background.style.backgroundColor = "rgb(" + color + ")";
}
getDominantImageColor();
}
Don't worry, I'll explain the javascript part
First we make sure our page is fully loaded by wrapping our code in the window.onload function
window.onload = () => {
//code here
}
Then we'll get our image and the background element
// get the image
let sourceImage = document.querySelector("img");
// get the background element
let background = document.querySelector(".background");
Next, we'll initialize colorthief and get the color palette of the image
// initialize colorThief
let colorThief = new ColorThief();
// get color palette
let color = colorThief.getColor(sourceImage);
Set the background color to the RBG value of the palette
// set the background color
background.style.backgroundColor = "rgb(" + color + ")";
Then we'll call the function
getDominantImageColor();
everything together should look like this
window.onload = () => {
getDominantImageColor = ()=>{
// get the image
let sourceImage = document.querySelector("img");
// get the background element
let background = document.querySelector(".background");
// initialize colorThief
let colorThief = new ColorThief();
// get color palette
let color = colorThief.getColor(sourceImage);
// set the background color
background.style.backgroundColor = "rgb(" + color + ")";
}
getDominantImageColor();
}
Our page should now be working!.
Hurray!
Any suggestions or issues, feel free to comment and follow me lol.
Top comments (0)