How to get dominant colour of an image with the Color Thief library in JavaScript
Tags: webdev, javascript, colours, tutorial
Published: 2022-11-03 22:58:23

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](https://n3rd-playlist-2022.netlify.app/#/playlist). Now let's do it too!.

We start with a basic boilerplate

![Basic boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ooyechyg51eotx1yz62i.png)

Then we'll code ourselves a simple HTML and CSS webpage with the [Color Thief CDN](https://lokeshdhakar.com/projects/color-thief/) link

(also available on NPM `npm i --save colorthief`)

### HTML
```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

```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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n6bv2erubi9c9wwrgfe.png)

Now for the fun part, Javascript!

```js
    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

```js
window.onload = () => {
//code here
}
```
Then we'll get our image and the background element

```js
        // 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

```js
     // 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

```js
        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";
```
Then we'll call the function 

```js
    getDominantImageColor();
```

everything together should look like this

```js
    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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daev15c6n1wql2cc1y8i.png)

Hurray!

![hurray](https://media.giphy.com/media/Ov26Dm3E34OEL57Gh7/giphy.gif)

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