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.
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.
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
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 ^^.
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....
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 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.
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.
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.
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. :(
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?
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."
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.
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.
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.
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.
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...)
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.
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
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 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?
104 comments
[ 2.4 ms ] story [ 146 ms ] threadI 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 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.
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....
Aware of the centering issue, looking into it thanks!
I seem to misremember a lot of logos as having red in them, when they don't. Anyone else have this problem?
PS: nice cats. And is Pi here on purpose ?
Everyone loves cats! And 3.14 is just an easter egg haha
PS: I vote for keeping the cats :D
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) ).
Loved the game though. Quick, easy, worth a few minutes playing around.
Maybe cause starbucks is that that popular in Europe?
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
Also, Shell is multi-national, even if it's based in Europe. There's tons of Shell gas stations around Canada.
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.
I found the Apple one the hardest.