I have the following containers that involve node dragging and dropping and 3 types of containers. I am looking for some guidelines to choose appropriate colors for them.

The green arrows are draggable while the red ones are only droppable. (Drag green one and drop on red one). And there will be one input container, one output container and one or more operator containers(3 types of containers).

enter image description here

  • what is a professional color? Never heard of such thing
    – Devin
    Commented Oct 12, 2016 at 4:36

2 Answers 2


You seem to have a lot of items to drag and drop. Make sure this is really the best interface for what you are trying to achieve since this is typically a physically demanding operation.

In the case you do need (or want) to use drag and drop make sure both the drag elements and drop areas are visually obvious. A drag element should be tangible, a drop area should look inactive until it gets a drop. This usually means a strong color for the drag element, and a grey (as in disabled) drop area.

In the following image which one would you say is the drag element, and which one the drop area?

Drag and drop visual logic

There are multiple clues. One is bright, the other is flat. One is small, the other is big. One is elevated (with a shadow), the other flat. One is made with continuous lines, the other shows a dashed (broken; incomplete) line. Do you get the point?

You make it very obvious which element is drag, and which is drop by using multiple clues. In your particular case, if you are limited by color I would recommend a bright (like the example green) vs a grey. If its also a possibility use a border for the elements (continuous vs dashed). If you can actually customize more your widgets try to get elevated elements for drag, and completely flat for drop. Also if possible make the drop areas bigger than the elements they are supposed to receive.


I love it when people ask for "colours that mean..."

The first thing I always have to state is that you should never use colour alone to indicate status, purpose, or function. Doing so will mean your systems is close to unusable for any colourblind users.

You should be using iconography if you need to indicate flow direction and manipulability.

I'm unsure why you can't drag an output to connect with an input. I moonlight as a music producer and see this on interfaces all the time: the goal is simply to connect an input with and output - it shouldn't matter which order the user does this.

Here's a screenshot that has many similarities with your scenario (input, processing, and output) but doesn't care which order the connections are made:

ST Audio DSP200 Control Panel

You can see that the lines are colour coded to make them easier to follow but the connecting points are simply sockets with no indication of which you should click first. This is because, as a user, I don't want to have to think about how I connect things together - I just want to get on and do it. It shouldn't matter if I connect output to input or input to output.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.