12 ms·
Show HN: Brandseen - A logo coloring game built in 24h
- kafkaesque 14y agoI 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.
- grinalds 14y agoI'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 14y agoSame 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?
- zapt02 14y agoThis was cool!
- drharris 14y agoI 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 14y agoHaha one level we really wanted to build was Google, 4 colors! Actually the hardest challenge would be remembering the order of the colors lol
- bluetidepro 14y agoA very fun game, indeed. Like "drharris" said, it would be neat to see more examples! It's a really awesome game, regardless, though!
- imkevinxu 14y agoYeah those were the best 9 we could make during the hackathon! Would love to make "startup" levels and "sport" levels or something lol
- bluetidepro 14y agoSome good ones I thought of are: Spotify, Adobe products, Office/PC products, more restaurants/fast food places, sports teams, etc.
- dave5104 14y agoWas 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 14y agoHaha 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 14y agoEither a side-by side comparison, or at least show on the color selector where the right color was.
- imkevinxu 14y agothats a pretty good idea, thanks!
- JocoProductions 14y agoSide 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.
- dmbass 14y agoWhat causes it to show 3.14? I got it 2 or 3 times.
- imkevinxu 14y agoJust a random 50% chance between 0 and 3.14 lol
- SafeSituation 14y agoLots 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 14y agoDropbox and Apple are the hardest because of gradients, so try guessing the average color. Thanks for the feedback!
- iamdann 14y agoGreat game, was amazingly close in a few, horribly far off on others. Thanks!
- imkevinxu 14y agoStill 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!
- citricsquid 14y agoI 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&level=yahoo http://brandseenapp.com/success?score=0&game=Basic&l... Uncaught TypeError: Property 'width' of object #<HTMLImageElement> is not a function
- munchor 14y agoIt's a bit about luck I guess. I got 94 on the Coca Cola one, and in the end my average was 40%.
- modeless 14y agoThis 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.
- lelandbatey 14y agoI 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 http://puu.sh/LniU
- imkevinxu 14y agoI just did the math, your average was 77.11 (total/9) which rounds to 77% :) Aware of the centering issue, looking into it thanks!
- revorad 14y agoVery nicely made! I seem to misremember a lot of logos as having red in them, when they don't. Anyone else have this problem?
- knowaveragejoe 14y agoPretty 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 14y agoGreat idea! Definite feature coming next
- cocoflunchy 14y agoVery cool, although I have some issues (latest Chrome on Win7) : http://i.imgur.com/KYWjk.png 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 14y agoThanks 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 14y agoI 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
- cocoflunchy 14y agoWell it didn't go back to normal for the Batman logo at least :/
- Kerrick 14y agoFun! 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 14y agoYeah 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.
- sswezey 14y agoNice! Got two 100s and an average of 78%
- dropshopsa 14y agoAwesome game, get rid of the cats tho
- imkevinxu 14y agoThanks 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 14y agoHey I've done similar games! check http://color.method.ac 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 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) ).
- imkevinxu 14y agoThanks a bunch there! Will definitely look into that formula, you have made some AWESOME games as well :)
- AriX 14y agoAwesome, 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."
- AriX 14y ago(Can't wait for Method of Action, by the way, looks awesome and could be seriously helpful for me.)
- qbproger 14y agoAre you allowed to use these logos for this purpose?
- kyberias 14y agoTried it with Chrome on Windows. About half of the logos were not visible at all.
- Kenan 14y agoWorked for me (Chrome 20 on Windows 7).
- sossles 14y agoI 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.
- prawn 14y agoSince 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 14y agothanks a bunch! definitely aware :)
- julianz 14y agoYep, same here. Most of the logos were either nonexistent or plain grey squares.
- StevenRayOrr 14y agoI 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.
- imkevinxu 14y agoThanks! 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.
- smackfu 14y agoSeems 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.
- zokier 14y agoBit 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.
- chucknelson 14y agoVery cool idea and well implemented! While I'm sure people will criticize the matching logic and such, it was definitely fun.
- tomjen3 14y agoMy only complaint is about the mermaid one. I didn't recognize it at all. Maybe cause starbucks is that that popular in Europe?
- Foy 14y agoYou mean Shell? It's a gas and oil company.
- smcl 14y agoIt'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 14y agoMe 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.
- Brashman 14y agoPretty 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.
- asynchronous13 14y agoMinor 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.jpg http://upload.wikimedia.org/wikipedia/en/9/9c/Wc_spectacular...)
- imkevinxu 14y agoGood 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 http://en.wikipedia.org/wiki/Coca-Cola
- reitzensteinm 14y agoI'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 14y agoIndeed. 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 http://www.thewwwblog.com/yahoo-logo-changes.html
- TazeTSchnitzel 14y agoAh, I knew it! I was sure it was a slightly pinkish red.
- rpicard 14y agoI couldn't really think of it, but ended up going with yellow.
- ngokevin 14y agoI was at their campus last week and everything was purple, got an 89.
- jmjerlecki 14y agoI didn't know either and I went to yahoo and it had an ad on top of the logo. I couldn't believe it.
- StavrosK 14y agoI 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.
- unohoo 14y ago1) 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
- mnicole 14y agoSuper 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.
- vhf 14y agoGreat. 16%. Yes, I'm colorblind.
- cpayne 14y agoMe too. 40%
- MikeCapone 14y agoInteresting. I got 69%.
- jakozaur 14y agoIt was developed at Greylock Hackfest.
- nsomething 14y agoI thought the coca cola logo was white lettering on a red field. Batman logo coloring is dubious at best
- mmoche 14y agoWhat's the accuracy needed to obtain 100%? Matching color codes or what?
- moe 14y agoI actually scored 100% on coca-cola on first try </brag>. Admittedly that was probably more luck than skill, though.
- dsr12 14y agoReally 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 14y agoOops, sorry! leftover from the hackathon
- kochb 14y agoIt'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 14y agoIt is ;)
- deleted 14y ago[deleted]
- kanamekun 14y agoGreat 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.
- dsrguru 14y agoCool 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 14y agoThanks 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!
- htf 14y agoI 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 14y agoGreat 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!
- joeld42 14y agoThis 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 14y agoGreat 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!
- deleted 14y ago[deleted]
- valdiorn 14y agoLawsuit! 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.
- duqee 14y agoGreat little game! 81% on average, how sad.