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.

By in Playground on
Demo Code

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:

InteractiveColoringConcept01

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

InteractiveColoringConcept02

Have a look at this animated GIF:

coloring_concept

And now, go and have some fun coloring 😉

We really hope you enjoy this little effect and find it inspiring.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating an ASCII Shader Using OGL

Trigonometry in CSS and JavaScript: Beyond Triangles

Coding the Sliced Image Hover Effect from Quai Network

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 64

Comments are closed.

  5. I’ve literally never been more envious of someone’s ability to be consistently original, brilliantly technical and amazingly creative. Mary, Thank you! This is epic. You’re an inspiration to me and all the front end developers I’ve ever worked with.

  6. That’s pretty cool. Could work with font sizes too I guess? Why aren’t you building site tools like this for some coin???

  7. Thank you all for your kind feedback 🙂 I’m really happy you like it 🙂 Cheers, ML

  9. Just amazing. Can see a freelancer using this for initial branding meetings. Thanks a lot.

  10. Incredible! A question though – what framework was used to create the demo HTML? I notice it’s RWD and would have been silly to custom code that just for this demo. Or does the developer have a standard site they have created that they always use for Codrops demos?

    Thanks!

  16. Would it be possible to drop in images instead of colors? Could someone point me in the right direction to getting that working?

  21. OH.MY.GOD!
    That was awesome.I don’t know how long it’ll take to be such a good designer and developer but i wanna be like you…SOON!

  23. Amazing. We love to use color pickers in WP Themes, but this is so much simpler in terms of usability. Thank you for the inspiration!

  25. Amazing effect, well done! Might end up using something based on this in next project, really nice (:

  28. Mary Lou, how to be awesome like you? How you come to this stage? You’re THE BEST.

  32. It’s awesome, Someday I hope to be like you, you love what you do and show it with your creations and best of all, they share what they know without wanting anything in return, do not know how much I admire: D

  33. Is there any callback function after droping a color on paint area that returns color code and dropped area id . So in server I can save this meta data.

    • Looking at the interact.js docs it seems to support a few different events when dropping. dropactivate, dropdeactivate, dragenter, dragleave, dropmove, drop.

      Using these events you could send a save request to your server.

      interact(dropTarget) .dropzone({ ondrop: function (event) { // send request to server here } })

      Hopefully that helps.

  34. *Jaw Drop
    Woow , just woow !!
    I will dig it deeper and hope it will applicable for my demo themes.

    Thanks !!

  36. WOAW…freakking awesome. This just takes codrops to the next lvl. Great work Mary. Keep it up !

  37. This is a really slick idea that I see the postential to go beyond colors and the web. I could see that interaction being used on something like those Coca-Cola Freestyle machines to potentially make the experience quicker & easier. It seems to take people forever to use them, and large lines tend to form which cause traffic issues in the restaurants that have them.

  38. That is really fun. Thank you for this. This is a pretty amazing way to create a website that would allow the user to customize their experience in a fun and interactive way! (Maybe as a way to customize a WordPress theme). Thank you for this.

  39. Hi there,
    Its an awesome feature but I believe that you have to improve it more by adding some more drag and drop options.
    Thanks

  41. 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.

  43. 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”.

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

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

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