Color scheme for 1-4 ratings

Question

I am task with shading the table cells containing ratings: Good (1) , Better (2), Best (3), Gold (4) or blank (as in not rated). It is possible that in the future another rating would be added - either 0 or 5.

Here is a sample table of the ratings: https://jsbin.com/ratavipuzo/1/edit

our app consists of mainly blue shade colors, e.g.

#b9d4ec
#428bca
#7eb0db

I was hoping someone could help idetifying the appropriate color scheme for the ratings in question, suitable for the app theme and clearly deomnstrating the scale, i.e. Gold is the highest ratings and Good is the lowest.

Answer 1

Interestingly enough, I think the answer I provided to a similar but slightly different question applies here as well. I have provided the link and the summary here:

Colours that represent beginner, intermediate and expert

The use of distinct colours can be subject to interpretation, as there are usual meaning associated with specific colours depending on cultural, language, context or any other number of factors.

A different strategy to the use of distinct colours would be the use of saturation or brightness to indicate a progression, which is possibly clearer compared to the use of different colours.

Given the possibility of different interpretation of colours, it is good to combine this with perhaps symbols or icons that also indicate a progression in the level of skills (perhaps stars).

Answer 2

I'd usually recommend the same as Michael Lai's answer, as a matter of fact I upvoted it. However, on a second thought, while working with brightness and saturation is the best path, it gives a sense of gradation and linearity. Since the data in your table is scattered, this could result in a very high cognitive load.

So, in your particular case I'd go with an approach I usually don't like for scales, but it fits your purpose: information transmitted by colors. And here you can use a very common scale, such as bronze, silver, gold, which doesn't require much explanation. If you need another color for 5 in the future, you could use blue as in your app (or you can relate it to diamond)

One thing to note: good in one extreme of the scale and gold on the other extreme is very confusing, they aren't even on the same semantic level, one is a noun and the other an adjective, so it would be better to stick to only one rule for the labels, such as bad, good, best or bronze, silver, gold. Just don't mix them