Interactive Drag and Drop Coloring Concept

A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

And this is how it can be used: you can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements. Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle. For that effect we use an SVG element that we create on the fly and then scale it up and fade it in with a CSS transition.

You can reset the whole thing by clicking on the droplet icon in the palette toolbar.

For the drag and drop functionality we are using the brilliant interact.js library.

Please note that this is highly experimental and only ready for modern browsers. IE does not support transitions on SVG elements so you won’t see the colored circle expanding.

Here is how you drag the droplet to the content or text elements of the website mockup:


The end result is the coloring of the area with a fun animation:


Have a look at this animated GIF:


And now, go and have some fun coloring 😉

We really hope you enjoy this little effect 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.

Feedback 64

Comments are closed.
  1. Very nice effects used for this demo and the whole concept is very fresh. Future update to include a color chooser/picker to add more colors or pull from a library like Kuler maybe.

  2. This is probably the best demo if I’ve seen on this site so far. And damn, you have A LOT of awesome demos. It’s really impressive how you guys keep pumping high quality content without ever “burning out”.

  3. wonderfull idea and well executed!!! Awesome work Mary, you a greek god when it comes to coding 🙂

  4. hello good work but is it possible to add to a existin websote so the users can select the colors????????

  5. It is a very cool and interesting demo. i think it would be fun to work with colors.

  6. Hi Mary Lou, i wondered if I could use the same technique to choose topics instead of colors to create an interactive newsletter … in a drag and drop topics with a mix of other drag and drop techniques and forms…

    Great work as always by the way !


  7. Amazing 🙂 . Thank you Mary Lou , in the future i want to develop the feature like WordPress Visual Composer with MVC