What 8 colors are readily distinguishable from each other?

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

What 8 colors are readily distinguishable from each other?

(11 posts) (7 voices)

Started 10 months ago by lummis
Latest reply from woebtz

Tags:

lummis
Member

For a game I'm doing I need to make tokens in 8 different colors not including black or white. More than 8 would be good but I want at least 8. I can get red, green, blue, yellow, magenta, and purple with the combinations of 0 and 255 for the RGB values, but I need 2 more. I've tried lots of other colors (e.g., brown, pink, pale blue) but I always seem to have one color that is too close to one of the others to be quickly distinguishable on the device. I suspect I shouldn't use primaries for the first 6 if I need a total of 8.

Are there any color mavens out there who can say what RGB values to use to make the most distinct 8 colors? There's probably a color theory answer to this question but I'm not up on color theory.

Posted 10 months ago #
jd
Member

Don't start with the absolutes of your colors - those are in the middle of the color range. Instead of dead red, you could do darker red. Then using orange is more viable. Same thing with blue and green.

Posted 10 months ago #
skyhawk
Member

See Starcraft 2

Posted 10 months ago #
Amit@PixelMat
Member

lummis,

Kindly go through this page: http://www.hitmill.com/html/color_safe.html

From above page, you can get :

2 different greens:
#009900
#00FF66

2 different blues:
#33CCFF
#330066

Dark Brown:
#990000

Purple:
#990099

Khaki:
#CC9900

Light Brown:
#CC3300

Yellow:
#FFFF33

Red:
#FF0000

Orange:
#FF9933

Each of the above is clearly distinguishable. You get the idea. Hex codes to RGB code color converter websites are out there.

Posted 10 months ago #
lummis
Member

Amit@PixelMat: Thanks very much - your reply is terrific. I'll be trying those colors right away. You win the brass dohickey!

Posted 10 months ago #
varedis
Moderator

This link may also help 500 colours with rgb values:

http://cloford.com/resources/colours/500col.htm

Posted 10 months ago #
lummis
Member

Yes it helps. Thanks.

Posted 10 months ago #
lummis
Member

I ended up choosing colors by trial and error. After hours of fiddling, here are 8 colors that are pretty distinguishable from each other, both on the iPhone 4 and my iMAC screen. I'm not totally satisfied with them because some of them aren't very pretty but they are distinguishable. Anybody who can improve them please paste your colors here. I hope this saves somebody some time.

ccc3(255, 64, 64); //red
ccc3(255, 64, 255); //pink
ccc3(196, 196, 255); //pale blue
ccc3(153, 0, 153); //purple
ccc3(255, 255, 51); //yellow
ccc3(0, 255, 0); //light green
ccc3(80, 80, 255); //blue
ccc3(255, 153, 51); //orange

While doing this it became clear that equidistant value in RGB space are not at all equidistant perceptually. In particular, the most saturated green possible (0, 255, 0) is not very dark -- I would call it light green -- but full blue is very saturated. Red is in between.

Posted 10 months ago #
lummis
Member

I've found the following to be a better set of 8 than the first list I posted so I thought I'd update the list. These are readily distinguishable and also a little nicer looking. Also, I've found that putting a black outline around colored objects makes the color seem more vivid and makes it a lot easier to distinguishing objects from each other on the basis of their colors. Color distinctness also depends on the background. Your scene might require a different set of colors but these work pretty well for me. My background varies from black to grey to white (no color other than black or grey).

ccc3(255, 0, 0); //red
ccc3(196, 196, 255); //pale blue
ccc3(75, 75, 255); //blue
ccc3(220, 130, 35); //orange
ccc3(185, 0, 200); //purple
ccc3(255, 255, 0); //yellow
ccc3(170, 255, 170); //light green
ccc3(0, 165, 0); //dark green

Posted 10 months ago #
lws
Member

Have a look at my game here: http://hemispheres.leberwurstsaft.de/en/
I had to choose 12 colors that are distinguishable, yet easy to determine the mixed colors in between them, since one of the objectives is exactly that. Mix two colors and select the right one from a list of three suggested colors.

I can pull out the list of colors, when I'm back home.

Posted 10 months ago #
woebtz
Member

If it's important for players to distinguish the colors in your game, I'd also recommend plugging them into this app with the various colorblind settings:

http://colorschemedesigner.com/

It would be appreciated!

Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.