Most websites uses a scheme of bronze, silver, gold, platinum, and maybe even diamond to rank service plans they may provide. In my website design, I want to the users to have a dot next to the username (like badges on stackoverflow) that specify what plan the user is on (so gold for gold members). How can I represent silver, platinum and diamond, all which look ‘grayish’, in a small area that measures 6px by 6px (as it is on SO, but maybe a little bigger is OK too)?
Bonus: Is there a better alternative to the metal + diamond scheme of ranking?
The issue with silver, platinum and diamond is that they are all usually represented with similar colors. Color alone would not be enough, but shape can go a long(er) way. You mention you want your icons to be really small, if that’s the case, only way to go is very simple shapes, like Stein mentions. I don’t think it would be a good idea to have two elements of practically the same color, so I’d definitely try with a yellow:
There is a website I used to participate in, and it was the first thing I thought of when I read your question. They use a badge system for users reputation, and their badges actually look like medals:
So they play not only with the color and shape, but also the size. I think one of the most important issues here is that any group you chose to use, you need to make visible as a whole. For example, the small medal in the example only makes sense if you have seen the bigger ones at least once (until I saw them, I thought my small bronze medal was amazing!).
I think this applies to all elements, even bronze-silver-gold, they only work as part of an ensemble (a gray circle if you haven’t seen what other users have is just a gray circle ad nothing more). In this case, size made sense when users were listed and you could compare the medals.
Now, I started thinking about this problem and if there was any workaround. If color, shape and size are not enough by themselves, and you can consider going a bit bigger with the icons, how about a realistic interpretation? A diamond is easy, everyone knows what they look like (at least in 2d!). The problem comes with platinum and silver, one of them will look a lot like the other. But using realistic illustrations could allow for some freedom, so why not “diamond, ruby, emerald”?
Image source: Iconfinder
Hope it helps!