Tips! Exploring the function of extracting image theme color from CSS

This article will introduce a small technique to use CSS to get the theme color of an image. Let's take a look~

background

The reason is that a student in the WeChat technology group asked, is there any way to get the main color of the picture? There is a picture, get his main color:

Use the obtained color value to achieve a function similar to this - there is a picture in the container, and I hope that the background color can match the main color of the picture, like this:

Everyone has made suggestions, some say that Canvas is used for calculations, and some recommend special open source libraries, all of which are very good.

So, can this function be realized with CSS?

It sounds a bit idiotic, can CSS still achieve this effect? emm, using CSS can indeed obtain the main color of the picture in a convenient way. In the case where the requirements for the main color are not particularly accurate, it may be a way. Let's take a look.

Use filter: blur() and transform: sacle() to get the theme color of the picture

Here, we use the blur filter and magnification effect to approximate the theme color of the picture.

Suppose we have such a picture:

<div></div>

Use the blur filter function to the picture:

div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

To see the effect, we used a relatively large blur filter to make the picture blur(50px) . The picture after the blur is a little bit like that, but there are some blurred edges. Try to crop it overflow

Next, we need to remove the fuzzy transform: scale() , and through the 0609a4ea195fd3 zoom effect, focus the color again, and slightly modify the code:

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    // 核心代码：
    filter: blur(50px);
    transform: scale(3);
}

The results are as follows:

In this way, we use CSS to get the main color of the picture, and the effect is still good!

here for the complete code: 1609a4ea1960a5 CodePen Demo - Get the main color of the image by filter and scale

Shortcomings

Of course, this scheme also has certain minor problems:

1. You can only get the main color of the picture roughly, not very accurate, and filter: blur(50px) 50px needs to be debugged.
2. The blur filter itself consumes performance. If there are multiple backgrounds obtained by this method on a page, it may have a certain impact on performance. In actual use, certain trade-offs are required.

At last

Okay, this concludes this article. I introduced a little trick to get the theme color of a picture using CSS. I hope it will be helpful to you :)

Thanks to the classmates who proposed this method to read the article - XboxYan , the iCSS WeChat group is very active, gathered a bunch of CSS bigwigs, students who want to join the group to discuss technology can add me WeChat coco1s (because the group exceeds 200 people, can’t scan the QR code to join the group, can only invite)

If you want to get the most interesting CSS information, don’t miss my public - 1609a4ea1962cc iCSS front-end interesting 1609a4ea1962cf 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.