16 ms·
Guess my RGB
- pierrelf 3y agoAmazing! Just needs an expert mode with 0-255 and alpha channel
- pavlov 3y agoAfter submitting, the background color of the box displaying the match percentage result shows you the color you guessed. (This may be obvious depending on the color you’re guessing, but in my case the color was quite gray and it took me a few guesses to notice this essential visual aid.)
- bun_terminator 3y agoFun! Spill your scores. I can usually get within 85%, had one perfect out of 10. And one 70%
- envp 3y agoSo far I’ve gotten to the end for a few colors. Quite fun, took my about 20-30 guesses!
- a_e_k 3y agoFun! After a few game, my best was 100% on the 4th guess. It looks like it's using Euclidean RGB difference, so one potential approach if you don't want to eyeball it is to just try to try to find the match for each channel one by one. Edit: Okay, my new best score was 100% on the 1st guess, thanks to the browser inspector. :-)
- B1FF_PSUVM 3y agoFive games, number of tries to "Splendid!": 9, 4, 11, 19, 8 (Burnt orange, bright yellow, light blue, shock pink, dark blue)
- williameckert 3y agoFirst game: 77 % on the first try, Splendid! on the second.
- Applejinx 3y agoI thought it just always said 'splendid!' at the end. Tried twice, got both within six tries. I've paid attention to this sort of thing before, though. If I could get it close I'd generally have an idea as to what was left to change. I could see 'this is more red than it should be' and go from there.
- johnisgood 3y ago2 games, one was correct at the 27th try, the second one at the 14th.
- trashtensor 3y ago8-12 attempts to get the color seems to be the range i tend to land in.
- thehucklecat 3y agoi got 6. surprised that it was that few, I figured it would take forever.
- DangerousPie 3y agoFun! This takes me back to coding up websites in plain HTML in Notepad. Coming up with the right hex codes for colors was an essential skill!
- panchtatvam 3y agoLoved it !
- Timwi 3y agoWould love to try a “Guess my HSL” spinoff.
- speedgoose 3y agoAnd a guess OKlab. https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- rikroots 3y agoNot a "Guess my OKLCH" game as such - more of an "Order my gradient numbers" thing - but it does use OKLCH ... https://codepen.io/kaliedarik/full/YzvYadX https://codepen.io/kaliedarik/full/YzvYadX
- ricardo81 3y agoOnly took me 18 guesses. Should've thought about ROYBGIV a bit before guessing.
- new_user_final 3y agoTook me 42 guesses.
- ldjb 3y agoHeads-up: It's ROYGBIV
- ricardo81 3y agoPretty fundamental to this situation :-) cheers.
- p4bl0 3y agoVery cool idea! On my first two tries, I quickly got to 94% but then got absolutely stuck there. The 94% seemed like a local optimum (moving any slider one slot in either direction Any way to explain that? Also: it would be cool to have a way to forfeit and get the solution.
- aiprogress 3y agoI don't think that's possible. When I tried it, if you only pick one number the percentage match goes up or down.
- otherme123 3y ago94% means you need only one slide up or down, so 6 posibilities. If you move one and it doesn't solve, you can't move another without getting the first to the old position.
- miggol 3y agoThe score is defined as follows: function score (r, g, b, rr, gg, bb) { const maxRErr = Math.max(r, 15 - r) const maxGErr = Math.max(g, 15 - g) const maxBErr = Math.max(b, 15 - b) const maxDist = Math.sqrt(maxRErr * maxRErr + maxGErr * maxGErr + maxBErr * maxBErr) const rErr = Math.abs(rr - r) const gErr = Math.abs(gg - g) const bErr = Math.abs(bb - b) const dist = Math.sqrt(rErr * rErr + gErr * gErr + bErr * bErr) return Math.floor(100 * (1 - dist / maxDist)) } Before even starting to count the error, it calculates the maximum error possible for the target colour. That makes sense! We want the percentages to feel more or less the same every round. Otherwise a medium grey would score relatively higher with every guess. But to answer your question, I don't think the local optimum situation you are describing is possible. I'm no math wizard but looking at this function there must (surely?) always be a direction to move one slider to get a higher score, unless you're bang on. So I think you just missed out on that one move, which does get ever more likely as your guesses get closer.
- neogodless 3y agoI had this issue. Didn't realize that on my phone I was fat-fingering and struggling to get exactly one movement on a slider instead of two.
- chrisjj 3y agoBug? #952 shows matching colour but scores only 94%. Android Chrome.
- jstanley 3y agoI think to ensure readability it caps the colour at the lower end, so #950, #951, #952 all show up the same. That's my best guess. EDIT: But from reading the code there seems to be no such logic. Strange, because I observed the same thing, in Firefox on Android.
- chrisjj 3y agoCertainly something odd is happening.
- otherme123 3y agoRGB tells you that #952 is as far from #951 as, for example #952 is from #851, or from #962. They aren't. The first two are very close, practically the same to the eye.
- susam 3y agoThe actual colour may have been #950 or #951 which looks very similar to #951. Pulling the blue slider down by a notch or two could have got you a perfect match. Here is a demo of these colours if you want to see for yourself how similar they look: https://susam.net/code/bin/2024-03-31-rgb-952.html https://susam.net/code/bin/2024-03-31-rgb-952.html
- chrisjj 3y agoThanks. Colour was identical.
- leononame 3y agoJust joining in on the canon that this is incredibly fun, much more than I would've anticipated
- somedude895 3y agoI sometimes play this with people at work. Point at something in the office and guess the RGB.
- ramshanker 3y ago22) #5A7 (Splendid!)
- haritahari 3y ago[dead]
- haritahari 3y ago[dead]
- elyobo 3y agoFun game, a convenient wordle style social media sharing utility would spread the word. Not sure what would work.
- animaomnium 3y agoOne idea is to embed the guesses in the url fragment (perhaps delta encoded) and from that url fragment, generate a social media preview image with a horizontal discrete gradient of the guesses. You would need a server to generate the preview images ofc, but something like a subdomain redirect to a cloudflare worker or what-have-you could be sufficient. If done right the generated previews could be pretty small.
- mg 3y agoI wonder what the optimal strategy would be if you can't see the color and only the answers when you click submit. Hillclimbing is already somewhat efficient: For each slider: - Start at 0 - Move to the right until the score drops - Move one to the left That should result in something like 9 tries per slider on average, so 27 tries per color. One signal that could be used to improve it: The difference in score between 0 to 1 gives you the approximate length you have to move to the right. Due to rounding, you don't get the exact length. So My guess is that with an optimal strategy, on average you would need something like 4 tries per slider. That comes down to and average of 12 tries per color.
- elsombrero 3y agoyou could apply a binary search for each slider and improve the number of tries by moving the slider by half of the shortest distance to the edge
- tetris11 3y agoPoor man's attempt: var speed = 50 // Prime the result output for (col of [rin, bin, gin]) { rin.valueAsNumber = 0 bin.valueAsNumber = 0 gin.valueAsNumber = 0 } rin.dispatchEvent(new Event('change')); async function tryit(col, incr) { // Increment a single color col.valueAsNumber = col.valueAsNumber + incr col.dispatchEvent(new Event('change')); submit.click() await (new Promise(resolve => setTimeout(resolve, speed))); var res_text = result.innerText.split(/[ ()%]/)[4] if (res_text === "Splendid!") { throw new Error("Finished") } return (parseInt(res_text)) } async function trymany() { // We need to iterate at least twice due to rounding // in result percentage, sometimes making neighbouring // colors have the same result. var last_res = 0, max_tries = 3; while (--max_tries > 0) { for (col of [rin, gin, bin]) { while (true) { var new_res = await tryit(col, 1) if (last_res >= new_res) { // set last value and break await tryit(col, -1) break } last_res = new_res } } } } await trymany()
- zafka 3y agoReminds me of this: http://yizzle.com/whatthehex/ http://yizzle.com/whatthehex/
- junon 3y agoThis is a lot of fun :)
- ldjb 3y agoIt's not linked to from the page, but here's the GitHub repo for anyone interested: https://github.com/susam/myrgb https://github.com/susam/myrgb
- cjk2 3y agoThis is my party trick. Describe a colour and I'll give you the hex code. As you can imagine I'm really popular at parties...
- benrutter 3y agoOK let's go! A muddy yellow reminiscent of the sweet and sour fruit found across Central America and the Southern States. (Taken from a paint description)
- cjk2 3y agoffcc33 I'm going on supermarket starfruit here so might be a bit off :)
- johnisgood 3y agoMaybe something darker like e5b934? I think we are better off giving ranges though. :P
- rrr_oh_man 3y agoIt's Hog Plum, if you google it. #FBCP001. I'm disgusted and enraged. Really liked the answers better.
- benrutter 3y agoYeah the answers seem like nicer colors, pretty close but too little green? #ffcc33 is beautiful btw
- tetris11 3y agoA melancholy purple reminiscent of the twilight depicted in childrens books, 1910, colorized.
- cjk2 3y ago
- keepamovin 3y agoReally so much fun! This guy produces great things. He did that micro drawing language a while back, right? Would also be cool to have a camera link where you can select the color to guess by pointing the camera at something. I find this guy so inspiring. He codes and creates tools like I aspire to. Just beautiful stuff!
- susam 3y agoThank you for the kind words. Crafting these small tools is a creative outlet for me. To learn that you like these tools is both gratifying and inspiring. So thank you for leaving this comment.
- keepamovin 3y agoYou’re welcome man. I love your (art) work. One day when I get out of the rat race side of software, I would love to just focus on this kind of stuff. So satisfying and creative and beautiful.
- yakkomajuri 3y agoAs someone who knows very little about colors, it was quite fun to see how much green is a light shade of purple I got. Could probably get better at guessing base RGBs I want for thing X on a frontends I build by playing this.
- mmahemoff 3y agoThis is fun. I like the fact you can click anywhere, which is nice for a non-touch device. Probably would help to emphasise those slider ticks as they are almost invisible, it would it more inviting to click instead of drag.
- jacknews 3y agoThere are a lot of similar games, eg https://trycolors.com/games/guess-color https://trycolors.com/games/guess-color I use them in my code club to teach about what is light, actually, how do we perceive color, how tv and computer screens 'trick' your color perception by simply mixing RGB in the right proportions, etc.
- skobes 3y ago<bug report> I got the first one in 10 guesses, then I tapped New Game but the background didn't change and my next guess said NaN% (Android Chrome)
- xandrius 3y agoTry on Android Firefox.
- Davidzheng 3y agosame (desktop firefox)
- SmartHypercube 3y agoExact same behavior here. I got it in 24 guesses. New Game doesn't change the color and guesses show NaN%. (Windows Chrome)
- brk 3y agoSame safari mobile.
- susam 3y agoThanks for the bug report. This should be fixed now!
- penteract 3y agoI swear that #516 looks darker than #505 (although perhaps only against a background of #505 with #808 next to it). Something interesting is going on there with my perception of saturation.
- lukew3 3y agoI made something similar a while ago. I opted for calculating a score based on the sum of distance between each of the channel values and gave users one guess. https://lukew3.github.io/color-code-tutor/ https://lukew3.github.io/color-code-tutor/
- sidedishes 3y agoThis is very nice! Someone I know made one of these too a while back with a similar UI - https://gkpotter.com/projects/rgb/ https://gkpotter.com/projects/rgb/
- kookamamie 3y agoIs the guessing done in linear or sRGB space?
- doctorhandshake 3y agoVaguely reminiscent of Specimen by Charlie Whitney and Erica Gorochow https://playspecimen.com/ https://playspecimen.com/ … a great game if you haven’t tried it, and unusually revealing about the limits of perception.
- nurple 3y agoReminds me of a video[0] that describes Diffie-Hellman key exchange in terms of mixing color values (as globs of oil paint). I guess in this game you're guessing the mix of primary colors, so maybe it doesn't hold the same property of difficulty in deriving the constituents? [0] https://www.youtube.com/watch?v=YEBfamv-_do https://www.youtube.com/watch?v=YEBfamv-_do
- bbx 3y agoIt's funny. I just finished writing a lesson where I teach about different color formats. In it, I explained how difficult it was to choose a color with rgb values, because that's not how humans think about color. This game is a great example of that. HSL is much more intuitive. As soon as you have an idea of the hue scale, it's very easy to define a color with saturation and lightness levels.
- Daub 3y agoCompletely agree about HSL being the 'thinking' color space. As an exfersise, I get my students to define the difference in the colors they are wearing using HSL. If you think RGB is hard to conceptualize, try Lab.
- mansarip 3y agomy eyes!
- antonpuz 3y agoWhat's the problem? just check the background color in inspect element and normalize to 16 levels :) haha But really, good job! very nice game, fun and challenging
- CuriouslyC 3y agoLanded on a high blue, guessed #00CC00, was correct, closed the browser. Kind of interesting I suppose though maybe more granularity so that I can't so easily guess?
- azeemba 3y agoHa this reminds me of a game me and my friend made a few years ago: http://rbgnrgb.com/ http://rbgnrgb.com/ You play as RBG fighting monsters with different RGB values.
- ssimono 3y agoReminds me of something similar I made a few years ago: https://github.com/ssimono/hexliterate https://github.com/ssimono/hexliterate It still works, that's a multiplayer real-time game
- chrismorgan 3y ago#f09 hurt.
- seabass 3y agoThis is unintentionally a great ad for perceptual color spaces. I found it easier to ignore the color and just look at the percentage changes after a while when zeroing in on a guess. I wonder if that would be different in a game of Guess My OKLCH!
- ivanjermakov 3y agoI noticed that percentages are not quite accurate to perception when color is really close (it seems to cap at 95%).
- htk 3y agoI LOVE this. I'll become RGBruceLee if I play this enough.
- mirlind_guri22 3y agosnap hack paswordp
- mirlind_guri22 3y agohack pasword
- mirlind_guri22 3y agohack pasword snapchat
- nick238 3y agoDid it work?
- salomon812 3y agoFor those that love this game (as I do) I recommend "I Love Hue" for mobile.
- blt 3y agoAgree, that game is great for anyone who enjoys a color perception challenge! I just bought my first OLED phone, maybe it's time to play again.
- tamimio 3y agoLove it, first one took 15 steps, second one took only 4!
- deleted 3y ago[deleted]
- blt 3y agoCurious if anyone can see the difference between #DD2 and #DD3. It was impossible on my 2013 Retina Macbook.
- chrisjj 3y agoI can on Samsung phone. But the difference is tiny. You found two of the closest colours in the space.
- hivacruz 3y agoFor a few recruitments, we asked the candidates to create a front app like this with React. It was quite nice as we could quickly see how they use the library, what they know etc. Simple app but funny game.
- florid 3y ago[dead]
- mldbk 3y agoRandomly got from first attempt
- deleted 3y ago[deleted]
- teensydata 3y agoIt's funny that I made a website exactly like this a few months ago. It was supposed to be Wordle for colors
- pteraspidomorph 3y agoI got the first one in a single guess and now I'm afraid it can only go downhill from here...
- yoyopa 3y agoisn't this HEX? RGB is usually 0-255 or 0 to 1
- stanleykm 3y agoit is rgb just 4 bits per channel instead of 8
- imacomputer 3y agoNice! I would love to study how people hone in the correct color, and how close people get on the first try. Do people binary search or scan a range?, how do they prioritize the color channels? etc
- taylorius 3y agoI seem to be able to get it in around 7-8 guesses usually - based on a fairly good initial guess (85% or so) and the heuristic that if the percentage went up by 1 in the previous axis increment / decrement, that axis is now at the correct value. It's a really entertaining game. Kudos to the author!
- deleted 3y ago[deleted]
- hunter2_ 3y agoReminds me of notching out microphone feedback on a 31-band graphic equalizer without a real-time analyzer revealing the frequency. There was ear training software to simulate this activity, for practicing the art.
- indigoabstract 3y agoIt would be interesting to know what type of people would find this game amusing.. Since I'm one of them, perhaps programmers?
- xzel 3y agoThis is awesome! I would love a GeoGuessr style gameplay element and watch my design friends compete over a couple of beers!