
Show HN: Brandseen - A logo coloring game built in 24h - imkevinxu
http://brandseenapp.com/
======
citricsquid
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...](http://brandseenapp.com/success?score=0&game=Basic&level=yahoo)
Uncaught TypeError: Property 'width' of object #<HTMLImageElement> is not a
function

~~~
lelandbatey
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>

~~~
imkevinxu
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!

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

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

~~~
BHSPitMonkey
* 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.

------
reitzensteinm
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.

~~~
Timothee
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>

------
joeld42
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.

~~~
imkevinxu
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!

------
Kerrick
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.

~~~
imkevinxu
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.

~~~
Foy
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. :(

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

------
smackfu
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.

------
kafkaesque
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.

~~~
qq66
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.

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

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

~~~
prawn
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.

~~~
imkevinxu
thanks a bunch! definitely aware :)

------
asynchronous13
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...](http://upload.wikimedia.org/wikipedia/en/9/9c/Wc_spectacular.jpg))

~~~
imkevinxu
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>

------
dsrguru
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.

~~~
imkevinxu
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!

------
knowaveragejoe
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.

~~~
imkevinxu
Great idea! Definite feature coming next

------
htf
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.

~~~
imkevinxu
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!

------
dave5104
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?

~~~
imkevinxu
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.

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

~~~
imkevinxu
thats a pretty good idea, thanks!

------
grinalds
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...:(

~~~
Destroyer661
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?

------
mnicole
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.

------
Brashman
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.

------
unohoo
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

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

Maybe cause starbucks is that that popular in Europe?

~~~
Foy
You mean Shell? It's a gas and oil company.

~~~
smcl
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

~~~
Foy
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.

------
kochb
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.

~~~
imkevinxu
It is ;)

------
zokier
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.

------
kanamekun
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.

------
imkevinxu
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?

~~~
duopixel
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) ).

~~~
AriX
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."

------
cocoflunchy
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 ?

~~~
imkevinxu
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

~~~
openbear
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

------
dsr12
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.

~~~
imkevinxu
Oops, sorry! leftover from the hackathon

------
drharris
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.

~~~
imkevinxu
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

------
SafeSituation
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.

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

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

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

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

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

------
revorad
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?

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

------
dropshopsa
Awesome game, get rid of the cats tho

------
valdiorn
Lawsuit!

Cool stuff, mate, but seriously, you could get in trouble for that, especially
if you're in America!

A lot of trademarks have rules and regulations about what can be done to them,
that includes changing their color, using them without consent from the owner,
etc...

I just thought I should warn you, I don't want fellow hackers to go to jail
because of stupid laws.

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

~~~
imkevinxu
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!

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

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

Admittedly that was probably more luck than skill, though.

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

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

------
jakozaur
It was developed at Greylock Hackfest.

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

~~~
cpayne
Me too. 40%

------
MikeCapone
Interesting. I got 69%.

------
zapt02
This was cool!

