0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
2 minute read
No comments

How to get dominant colour of an image with the Color Thief library in JavaScript

Terence Zimwara
November 4, 2022
how-to-get-dominant-colour-of-an-image-with-the-color-thief-library-in-javascript
Total
1
Shares
1
0
0

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

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


 lang="en">

     charset="UTF-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1.0">
     rel="stylesheet" href="index.css">
    </span>Dominant color tutorial<span class="nt">



     class="background">
         class="image-container">
                         src="https://loremflickr.com/420/340" alt="image" crossorigin="anonymous">

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

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!.

working kitty page

Hurray!

hurray

Any suggestions or issues, feel free to comment and follow me lol.

Total
1
Shares
Share 1
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
the-promise-of-platform-engineering

The Promise of Platform Engineering

November 4, 2022
Next Post
soul-|-a-sqlite-restful-server

Soul | A SQLite RESTful server

November 4, 2022
Related Posts