DEV Community

Cover image for How to get dominant colour of an image with the Color Thief library in JavaScript
Godwin Jemegah
Godwin Jemegah

Posted on

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

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



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


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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();
    }



Enter fullscreen mode Exit fullscreen mode

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
}


Enter fullscreen mode Exit fullscreen mode

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");


Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

Set the background color to the RBG value of the palette



        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";


Enter fullscreen mode Exit fullscreen mode

Then we'll call the function



    getDominantImageColor();


Enter fullscreen mode Exit fullscreen mode

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();
    }


Enter fullscreen mode Exit fullscreen mode

Our page should now be working!.

working kitty page

Hurray!

hurray

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

Top comments (0)