I really love this idea, but I have a big problem with colour selectors. I'm not sure if it's unique to me or a common problem, but I can visualise the right colour (and could pick it out of a line up) but when playing with a colour selector all colours blur into one and it becomes very difficult for me to differentiate colours effectively.

I could look at 100 different Coca Cola logos and point out which has the right red, but trying to colour it myself is an impossible task. Even now I played the Coca Cola logo 3 times, even after seeing exactly the right colour I can't get it right on the selector (my score every time was between 73 and 77).

Anyway, actual feedback: For some reason some of the logos don't load, although checking the console I see the following errors so I assume it's server issues:

Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR) http://brandseenapp.com/success?score=0&game=Basic&l... Uncaught TypeError: Property 'width' of object #<HTMLImageElement> is not a function

This game could actually be a great way to A/B test different types of color picker to see which ones work better for the general population.

I also saw quite a few errors, such as the logo I was supposed to be coloring being very out of place from the center of the page, or off to the side. Also, my "average" score seems to have been calculated in a very odd way. It looks like this: http://puu.sh/LniU

I just did the math, your average was 77.11 (total/9) which rounds to 77% :)

Aware of the centering issue, looking into it thanks!

Ah, I thought the 3.14 was a joke score. NVM then.

Haha if you get a 0 it's either 0 or 3.14 you get.

* I picked a color for IBM that was almost perfect (it barely darkened just a bit when I submitted), but it gave me a 3.14. * Dropbox's logo is colored pretty differently depending on where it's displayed (I colored mine lighter, like the system tray icon, rather than darker like the logo on their homepage). * For Apple, I tried just submitting without making any changes because it looked pretty close to correct already. I was given a 0%, even though it only barely changed.

It's a bit about luck I guess. I got 94 on the Coca Cola one, and in the end my average was 40%.

I got 85% for the Coca Cola logo on the first try and only from memory. On this same first try at the end of the session my average score is 80% (I got the wrong blue (I thought it was darker than it actually is) for IBM and got 47% for it, lowering quite a bit the average). Also I'm not a designer or anything close to that, I'm a computer science student.

This to say I don't think it is an "impossible task".

EDIT: just got a friend (also not a designer, and with an (in my opinion) extremely bad taste in colors :-p) doing the test and he got 78% average, with 100% for Apple (he's not an Apple user) and Shell, 99% for Batman, 97% for Coca Cola, but 0% for Dropbox ^^.

So this confirms that it is far from impossible.

Thanks criticsquid! Yeah the whole realm of color is an interesting space with color profiles and logos that have changed their tint slightly over the years. We tried to pick the most "official" color (usually from Wikipedia) but can look into it more as this was just a 24 hour hack.

As for the errors, thanks! May I ask what OS/Browser you're using? I fixed the width error but the GET request is still being sent so I don't know why it's saying that, hmm....

Maybe your screen isn't calibrated properly? I got 97% for Coca Cola on the first try.

Agreed, I personally think an HSL colorpicker would work better here, but I'd like to see/try others.

Well, this is basically an HSL color picker... minus the S part. What specifically would you change about the current color UI?

A three-slider HSL color-picker. It was really hard for my co-workers and I to pick the right hue without worrying about dealing with the saturation too. I'm used to color-pickers so it wasn't as bad for me, but they kept thinking they could use more inner/desaturated colors and then just tweak the darkness to accomodate for the lightness they didn't realize was happening.

I'm willing to bet I'm not the only one here who had no idea Yahoo's logo is now purple. How the mighty have fallen.

Indeed. I was familiar with the purple but I went straight red and got 3.14/100. Turns out, the color was changed in June 2008: http://www.thewwwblog.com/yahoo-logo-changes.html

I went "Yahoo!? I don't know, some sort of purple?" And then got 100% on it. I think it's just a really easy color to pick, it's of medium saturation and at the edge of the wheel.

I didn't know either and I went to yahoo and it had an ad on top of the logo. I couldn't believe it.

I couldn't really think of it, but ended up going with yellow.

I was at their campus last week and everything was purple, got an 89.

Ah, I knew it! I was sure it was a slightly pinkish red.

This is a cool idea but I don't think it works quite right, matching RGB color is a perceptual thing, there's no absolute "starbucks green" that you could display on a monitor. Even a calibrated monitor in controlled lighting conditions is still calibrated to something (like a film stock or a certain printer profile).

I think a better way to present this would be to show a photograph which incorporated the logo (e.g. a Coca-Cola billboard in a city on a sunny day) with the grey logo, and then have the user color-correct the logo until it matched the perceptual reference of the context that it was in. The "coca cola red" in RGB values would not be pure red but I think the user would probably have a better chance of making it "look correct" in the photo (thus matching the color values in the original photograph) than trying to match it without any context. Would make a neat experiment, too.

Great thought! Context truly is important, the idea we were going for was that you might be used to seeing a certain logo/color on your monitor so you would just try to guess that color hue again. Also we tried to make the algorithm somewhat lenient to take into account the different calibrated monitors.

Also keep in mind this was just built in 24 hours at a hackathon, tons of things we can and will do better! Thanks again!

Fun! I left Apple where it was in the middle because it looked about right to me (silver) and got a 0. Other than that, I was between 75-98 every time.

Yeah the gradients are an interesting one because by default it's just the alpha channel so "Black" is technically the 100 pointer but the algorithm needs to be more lenient along the gray scale. Sorry about that, will correct.

Yeah, even when I got the right "colour" if my colour was too dark, or too light, it really punished me. Like downwards of 30/100 for the wrong shade. :(

Yeah we'll be making that more lenient since it's really just the "brightness" part of HSB

Seems like moving the brightness slider up and down should also change the color wheel. As it is, you have to pick a full intensity color then adjust it to a lighter one that may not be very similar at all.

I did this all by memory. First and only try.

Here are my results (and my very brief feedback follows):

coca-cola: 96 batman: 100 Yahoo!: 85 Dropbox: 83 McDonald's: 82 Starbucks: 85 IBM: 94 Shell: 89 Apple: 100

Avg Score: 90%

The only one I seemed to really have a problem with is Shell. The red seemed way too vibrant/bright. The Apple one I think can throw people off because of Apple's love with a glossy, "transparent" look. My intuition told me it was a lot lighter, but then on second thought, I decided to go way darker, thinking of the logo as separate from what Apple puts on their actual products.

I'm using a cheap CRT monitor, by the way.

coca-cola: 86 batman: 96 Yahoo!: 99 Dropbox: 76 McDonald's: 92 Starbucks: 80 IBM: 3 Shell: 67 Apple: 24

I found the Apple one the hardest.

I found it the easiest. I got 100 on that after about 2.5 seconds. Dropbox 96 - everything else 50-80.

Tried it with Chrome on Windows. About half of the logos were not visible at all.

Since an upvote alone won't help OP gauge how many people experienced your problem, I'm saying "me too" here.

Loved the game though. Quick, easy, worth a few minutes playing around.

thanks a bunch! definitely aware :)

I had the same problem with Chrome on Mac (Version 20.0.1132.57), but found that if I changed the color (in any way) the logo appeared. So it is rendering the image eventually. No idea if that helps with finding a solution.

Thanks! We're aware of the issue, it has to do with it trying to draw the image before the src loads so it doesn't show it but when you click on the colorpicker it draws. Just found out about jQuery load() so will be playing with that.

I had the same problem, same platform (Chrome 20.0.1132.57 m). A couple even had the indecency of appearing at the exact moment that I clicked the "Compare" button.

Yep, same here. Most of the logos were either nonexistent or plain grey squares.

Worked for me (Chrome 20 on Windows 7).

Minor quibble, but having lived in Atlanta for a decade I feel like I need to mention that the Coca-Cola logo is more typically white text with red background. (for example, at the world of coca-cola: http://upload.wikimedia.org/wikipedia/en/9/9c/Wc_spectacular...)

Good point, most brands have multiple versions of their logos so we used the one off their Wikipedia page http://en.wikipedia.org/wiki/Coca-Cola

Cool project! But I must say, the algorithm that computes the percentage score seems rather poor, at least if the goal is to score the percent visual difference between the selected color and the actual. It gave me 100% on Coca-Cola (and I replicated the 100% with a slightly different shade in a different browser tab), yet I got only 3.14% for leaving Apple the default color, which looks almost the same as the correct color. Some of my other answers were similarly penalized heavily for brightness being a little off even if the hue was almost exact. The visual difference between those colors and the correct colors was far less than the visual difference between some of my higher scoring answers and the correct color.

Thanks for the feedback. Definitely aware of the algorithm problem and how it penalizes for brightness difference more than hue difference which doesn't make that much sense for the end user. This has been a great day of testing and tweaking and we will be trying to make it better, thanks so much!

Pretty neat, I did surprisingly well. Would be nice if you could see just how far you were off besides the color changing after you hit the button. A different circle on the color wheel, for example, showing where you picked and where the color actually is.

Great idea! Definite feature coming next

I like this game. Here are some suggestions. I would prefer to only have to select the hue (the angle in the circle). That is, the game would prepare the correct saturation (distance from the center) and brightness (the vertical bar) for me. My score would be the difference in degrees between my answer and the correct answer. It would make the game more enjoyable to a wide audience. It would also make the score easier to understand than a percentage (the percentage means nothing to me). Finally, I would like to have the name of the company written in text under the logo for cases where I want to know who it belongs to.

Great suggestions! - Making the game only one parameter sounds great for an "Easy" mode but the scoring algorithm would also make a lot more sense, true that. - Name of company makes sense, will put it in soon!

Was pretty fun. I was totally wrong on Coke, though. And I somehow got a 3.14 for Apple? :P Would be cool if the answers were given at the end as well, perhaps side by side with your guesses?

Haha small easter egg. The correct image should fade on top of your guess after clicking "Compare". Would side by side comparison be nicer? The main concern was screen real estate.

Either a side-by side comparison, or at least show on the color selector where the right color was.

thats a pretty good idea, thanks!

Side by side comparison of the color wheel and lightness/darkness would be fantastic. It would really give a better idea of how close or far away your guess is.

What causes it to show 3.14? I got it 2 or 3 times.

Just a random 50% chance between 0 and 3.14 lol

I'm color deficient --- failed the tests at school where you pick out the letters/numbers from the bubbles --- and I got a 100% on apple and a 0% on Batman...:(

Same here. Colour games can be frustrating for us differently-coloured people. :P I can imagine how this is really fun for someone who can see colour properly. Maybe as a challenge the author could include colour blind mode?

Super fun, thanks for building this! Had an issue where my Dropbox logo was only showing up at 50% opacity or so, so my final color was off by a lot more than I was expecting. My Shell logo was also just slightly darker red and I got a 58. There was a weird transition of the color I chose and the actual logo, so not sure if that had anything to do with it.

Pretty fun. It'd be neat to be able to see your choice next to the correct version so you can visually see how "far" you were off.

1) I had the same problem that citricsquid mentions below. I would say provide the user with a select option from like 5-7 colors. 2) Add game mechanics to show a leaderboard to see where you stand 3) This idea could be pretty attractive to brands -- helps in brand engagement and brand building without the negative connotation of advertising

My only complaint is about the mermaid one. I didn't recognize it at all.

Maybe cause starbucks is that that popular in Europe?

It's a European gas and oil company

edit: just went through this again and the "mermaid" logo referred to is the Starbucks one. I never really thought about it being a mermaid before

Me neither... I figured Shell would be the closest thing to a "mermaid" related logo, but I guess I was wrong.

Also, Shell is multi-national, even if it's based in Europe. There's tons of Shell gas stations around Canada.

It'd be interesting if the statistics on this are being kept. You could answer questions like which brands don't have strong color identities, whether people tend to err on the side of lightness/darkness with certain logos, etc. You never know what unexpected things you might discover.

It is ;)

Bit scary how well I actually did for brands that I don't know that well (in my case, Starbucks and Batman). Surprisingly internet companies like Yahoo and Dropbox got me worst scores, although I don't use either which may explain that as they don't do as much advertising.

Great and surprisingly addictive game!

I don't have much of a memory for color names, so was surprised at how well the human brain can remember colors even without a vocabulary to describe them. It really goes to show you that a good logo really does help sear the brand into your mind.

Thanks everyone for all the support, comments, and letting me know about some bugs! One of the biggest challenges I had was finding an algorithm to determine the "difference" between two hex codes. Anyone have any tips on that?

Hey I've done similar games! check http://color.method.ac. You need to convert hex to CIELab, and then apply a color difference formula http://en.wikipedia.org/wiki/Color_difference

Don't let the complex versions put you down, the simplest formula is good enough, just Math.sqrt( Math.pow(L1-L2, 2) + Math.pow(a1-a2, 2) + Math.pow(b1-b2, 2) ).

Awesome, thanks for the advice. We were looking into alternatives for algorithms that better reflected human color interpretation, and that looks very helpful. And yeah, your games are awesome, we basically modeled this as "the Kerning Game/Color Game, but for brands."

Thanks a bunch there! Will definitely look into that formula, you have made some AWESOME games as well :)

(Can't wait for Method of Action, by the way, looks awesome and could be seriously helpful for me.)

Are you allowed to use these logos for this purpose?

Very cool, although I have some issues (latest Chrome on Win7) : http://i.imgur.com/KYWjk.png It doesn't do this on every logo though...

PS: nice cats. And is Pi here on purpose ?

Thanks for the screencap, it's a small bug that should resolve itself once you click on the colorpicker. Will look more into.

Everyone loves cats! And 3.14 is just an easter egg haha

I saw the same issue in Safari 5.1.7 on OS X 10.7.4. Nudging the colorpicker fixed it for me.

PS: I vote for keeping the cats :D

Well it didn't go back to normal for the Batman logo at least :/

Really addictive game. It can easily be extended to include cartoon characters or comic book superheroes! One suggestion, please add a nice 404 page so users don't see the raw message.

Oops, sorry! leftover from the hackathon

I like this, hope to see more examples. I was surprised to find I was quite wrong on brands I thought I knew well (e.g. Yahoo). Fun little game.

Haha one level we really wanted to build was Google, 4 colors! Actually the hardest challenge would be remembering the order of the colors lol

Lots of fun! Occasionally, whatever color I guess, it gives me a 0. Happened twice, on Dropbox and on Apple. I tried the game 3 times.

Dropbox and Apple are the hardest because of gradients, so try guessing the average color. Thanks for the feedback!

A very fun game, indeed. Like "drharris" said, it would be neat to see more examples! It's a really awesome game, regardless, though!

Yeah those were the best 9 we could make during the hackathon! Would love to make "startup" levels and "sport" levels or something lol

Some good ones I thought of are: Spotify, Adobe products, Office/PC products, more restaurants/fast food places, sports teams, etc.

Very cool idea and well implemented! While I'm sure people will criticize the matching logic and such, it was definitely fun.

Very nicely made!

I seem to misremember a lot of logos as having red in them, when they don't. Anyone else have this problem?

I thought the coca cola logo was white lettering on a red field. Batman logo coloring is dubious at best

Awesome game, get rid of the cats tho

Great game, was amazingly close in a few, horribly far off on others. Thanks!

Still tweaking with the scoring algorithm, it got really hard to test against myself cause I knew the colors so well lol but this is a good data set!

What's the accuracy needed to obtain 100%? Matching color codes or what?

I actually scored 100% on coca-cola on first try </brag>.

Admittedly that was probably more luck than skill, though.

Great little game! 81% on average, how sad.

Nice! Got two 100s and an average of 78%

It was developed at Greylock Hackfest.

Great. 16%. Yes, I'm colorblind.

Me too. 40%

Interesting. I got 69%.

This was cool!