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

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.

• What is the age level of the target audience of this game? Dec 29, 2016 at 16:31
• @NathanRabe It will be available to general app store users so really any age, but you shouldn't feel the need to make it "kid-like" or dumb it down for children if that's what you're asking. It just needs to be simple enough for the average person to understand fairly quickly (i.e. after shown said visual on a tutorial page). Dec 29, 2016 at 16:33

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.

• I was thinking about this. Pretty much everyone will understand to mix the two primaries atleast. And then they should have enough practice to figure out mixing to tertiary with trial and error. The only "user test" I've done though was letting my gf play and she found it annoying she couldn't get the green and purple to mix. If I can't find a simple way to show it though I will probably just forgo it and let users figure it out. Dec 29, 2016 at 17:47
• I would probably let any two colors be mixed and if the result isn't defined by your game, turn it to black or something equally useless. I've played a game that was even more generous and let you get back to primary colors if you mixed secondary/tertiary ones right. That way you never ended up with a "dead" black potion. But there was magic and not logic involved there. Dec 29, 2016 at 17:54
• I ended up just not showing the progression. I gave a brief tutorial on gameplay and I believe it is pretty simple to figure out what is happening. Thanks! Jan 11, 2017 at 16:04

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

• That is a very cool way to think about it, I haven't thought of it that way yet. I'll think on it and see if there is a good way to show that rule. Dec 29, 2016 at 16:43
• @DasBeasto I'm interested to see what you come up with! Dec 29, 2016 at 16:46

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.