How to show linear progression of color mixes from primary, to secondary, to tertiary colors?

Question

I am making a game, and in said game the goal is to mix colors to progress up the level of colors (primary color to secondary, secondary to tertiary) based on the standard RYB color scale seen below.

However, some colors mix and some colors don't (red and blue = purple, red and green = ??). So I want to devise a chart that can easily tell people what colors are allowed to mix and what colors they will produce in a linear fashion.

Here are the complete list that I want to show visually:

• red + blue = purple
• red + yellow = orange
• red + orange = red-orange
• red + purple = red-violet(purple)
• blue + red = purple
• blue + yellow = green
• blue + green = blue-green
• blue + purple = blue-violet(purple)
• yellow + red = orange
• yellow + blue = green
• yellow + green = yellow-green
• yellow + orange = yellow-orange

The reason I don't really like the graph depiction shown above is it doesn't really show what colors are allowed to mix, i.e. red and yellow mix across the triangle, why can't green and orange?(I suppose the lines kind of say this but they're quite confusing) and it doesn't easily depict the progression from primary to secondary to tertiary.

Is there a good way to show this?

P.S. I included duplicates in the list but they can be left out of the visualization if it makes more sense.

Answer 1

A chart may not be necessary.

Color mixing is fairly intuitive and it is likely the average game player will understand what is being asked of them. Even if they are fuzzy on the specific recipes for each named color, the possibility space is limited, so a little trial and error (along with showing the goal color) will easily allow the player to see if they are on the right track or erring a shade one way or the other.

What happens if the player tries to mix green and red? If the game prevents that combination from being selected, that reduces the need for a chart. (You don't have to tell them such mixing is prohibited if you do the prohibiting.) On the other hand, if an undesirable color like brown or black is produced, the player learns that that is an incorrect recipe and will avoid it in the future.

A suggested user test would be to give someone the task of creating chartreuse and supplying them with blue, green, yellow, and red. If lots of people go for the blue or red colors you can decide if the task/interface is too confusing or if consulting a chart is really required. But if everyone groks what is going on, and correctly mixes yellow and green, you can safely skip adding instructions.

Lego Dimensions is a recent example I can cite that has no instructions for color mixing and is aimed at all age ranges. You are expected to know that yellow + red = orange and in case you don't, there is plenty of room/time for trial and error. (Note that they only deal with primary and secondary colors, so admittedly some of the scope of your problem is lost.)

Games are about exploring and learning what is possible and how the game systems work. Rigidly outlining those limits in a chart will reduce the enjoyment of discovery that players will experience when they figure it out on their own.

If you absolutely need some kind of linear visual reference, the standard hue scale looks something like this:

You could annotate the scale with the valid inputs on the top (primary and secondary colors) and possible outputs on the bottom (secondary and tertiary colors). This allows you to show that secondary colors like green are special in that they can be obtained from other colors as well as used to make yet more colors.

Answer 2

_{(Disclaimer: this might not be considered a complete answer because it lacks a mockup to address the question, so flag it if you must.)}

It looks like what you're wanting to enforce is that:

• Primary colors can mix with
  • Primary colors
  • Neighboring secondary colors (e.g. red and green can't mix.)

So this means that:

• Secondary colors can only mix with
  • Neighboring primary colors

I have no idea of what your game looks like or what you're trying to have the user do with it so I can't really guess what it should look like, but hopefully having the rules laid out like this might help you devise a clear UI.

Answer 3

The main problem from the diagram you have is the second level of combinations, a primary color with a secondary one. Following @maxathousand answer and the combinations the user can choose I made this diagram:

The colors relations are made in the vertex of the triangles. The lines are there to reinforce the relations. The size of the circles reinforce the "pureness" of the color, biggest ones are primary for example.

---

These are different proposals playing with the geometry, though maybe not as clear as the former.