Color Extraction Effect

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. We are using Vibrant.js by Jari Zwarts to extract the colors from the images, and CSS Filters to transition the image to a black and white version. We also implemented a simple slider with a special “curtain” effect.

Attention: This experiment uses some CSS properties that might not work in older browsers (CSS Animations, CSS Filters).


For IE 10+, where we don’t have support for CSS Filters (only in Edge behind a flag), we added a simple fallback where we place a SVG image on top of the colored one and apply a SVG filter effect.


For the color palette items, we add a little wave as background image and animate it, to simulate the item getting “filled” with the color that we extract using Vibrant.js. The Hex color code is placed beneath the extracted color.


We hope you enjoy this little experiment and find it inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 22

Comments are closed.
  1. Works really well. A great way to get theme colours from existing images.

  2. That is simply amazing. Not sure where I can use this but I will definitely figure out a way to incorporate it into my work. Thanks!

  3. Hi, it is such an amazing plugin, I’d like to know if it possible to display the associate code of hexadecimal in CMJN ?
    Thnak you for your anwser


  4. Not only this one, but whole of all plugins given here are excellent. can i use them in my web sites ?