This article will show you a trick to use CSS to get the theme color of an image. Take a look ~

background

The reason was that a student in the wechat technology group asked, is there any way to get the main color of the picture? Here’s an image, get its main color:

Use the obtained color value to do something like this: You have an image in the container and want the background color to match the main color of the image, like this:

We all gave suggestions, such as using Canvas for calculation and recommending special open source libraries.

So, with CSS, can you achieve this function?

As crazy as it sounds, can CSS do this? Emm, the use of CSS can indeed through a clever way, approximate to obtain the main color of the picture, in the case of the main color requirements are not particularly accurate, it is a way, let’s see what it is.

Use filter: blur() and Transform: sacle() to get the image theme color

Here, we use blur filter and zoom effect, can approximate the image theme color.

Suppose we have a picture like this:

<div></div>
Copy the code

Apply the blur filter to the image:

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);
}
Copy the code

To see the effect, we made the image blur(50px) with a larger blur filter. The image after blur felt like that, but there were some blurred edges. We tried to crop it with overflow.

Next, we need to remove the blurred edges and zoom in with transform: Scale () to refocus the color and change the code a bit:

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; // Core code:filter: blur(50px);
    transform: scale(3);
}
Copy the code

The results are as follows:

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

CodePen Demo — Get the main color of the image by filter and scale

Deficiency in

Of course, there are some minor problems with this scheme:

  1. You can only get a rough picture of the main tone, not very accurate, andfilter: blur(50px)this50pxSome debugging is required
  2. The blur filter itself is performance consuming. If there are multiple backgrounds obtained by this method on a page, the performance may be affected to a certain extent, and the actual use of a certain choice should be made

The last

Ok, that’s the end of this article, introduced a CSS to get a theme color tips, hope you help 🙂

Thanks to the readers who introduced this method — XboxYan, iCSS wechat group is very active, gathered a group of CSS leaders, students who want to join the group to discuss technology can join my wechat coco1s (because the group is more than 200 people, can not scan code into the group, can only invite)

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.