HackerTrans
TopNewTrendsCommentsPastAskShowJobs

Guess my RGB(susam.net)

618 points·by talonx·2 anni fa·144 comments
susam.net
Guess my RGB

https://susam.net/myrgb.html

153 comments

mg·2 anni fa
I 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.
tetris11·2 anni fa
Poor 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()
sunnynagam·2 anni fa
Optimized with binary search (can't figure out why ycomb formats my code all ugly)

var speed = 500;

[rin, bin, gin].forEach(col => { col.valueAsNumber = 7; col.dispatchEvent(new Event('change')); col.score = 0; });

async function tryit(col, value) { col.valueAsNumber = value; 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 - Found correct combination"); } col.score = parseInt(res_text); return col.score; }

async function binarySearch(col) { let start = 0; let end = 15; let mid = 7; let startAccuracy = await tryit(col, start); let endAccuracy = await tryit(col, end); let midAccuracy = 0;

    while (true) {
        mid = Math.floor((start + end) / 2);
        midAccuracy = await tryit(col, mid);

        if ((end - start) <= 2) {
            const max = Math.max([startAccuracy, midAccuracy, endAccuracy]);
            if (startAccuracy == max) await tryit(col, start);
            else if (midAccuracy == max) await tryit(col, mid);
            else await tryit(col, end);
            return;
        }

        if (endAccuracy > startAccuracy) {
            start = mid;
            startAccuracy = midAccuracy;
        } else {
            end = mid;
            endAccuracy = midAccuracy;
        }
    }
} async function findOptimalCombination() { for (const col of [rin, gin, bin]) { await binarySearch(col); } /* rounding */ for (const col of [rin, gin, bin]) { const mid = col.valueAsNumber; const score = await tryit(col, mid); const left = await tryit(col, mid - 1); if (score >= left) { const right = await tryit(col, mid + 1); if (score >= right) await tryit(col, mid); } } console.log("Optimization complete"); }

await findOptimalCombination();
tetris11·2 anni fa
This is great -- it has a very consistent performance of ~20 steps. I notice that my naive attempt seems to be faster in some cases.
[deleted]·2 anni fa
[deleted]·2 anni fa
js4ever·2 anni fa
Not bad, 18 to 43 attempts on 10 games I tried. Far from optimal but good enough :p
tetris11·2 anni fa
I had an updated version which implemented a binary search, but I couldn't update my previous comment so I dropped it. That being said, due to the scoring function `score(r,g,b,rr,gg,bb)` giving the exact same score sometimes for neighbouring colors, the search would still have to repeat and wasn't much more optimal than the code you see above.
sleepingreset·2 anni fa
how do you run this?
andy_ppp·2 anni fa
I imagine pasting into the JS console after inspecting the page?
sleepingreset·2 anni fa
nvm thought it was bugged. user issue not code
alex_smart·2 anni fa
Assuming the score is 100-Euclidean distance, you should be able to triangulate to the correct answer after three random guesses. Triangulation will give you two candidates for the correct colour, so if you choose between them randomly you should get the correct colour in 4.5 tries on average.
penteract·2 anni fa
The score is floor(100*(1-distance/max_distance)) where max_distance is the greatest distance to the target from any point in the cube. This means that the spheres used in triangulation look funny. Rounding also gets in the way, but you can do it in 5 guesses starting with #B74, #448, #B8B and #4B7 (the first 3 are enough in to uniquely identify it in 3911 out of 4096 cases, and the first 2 are enough in 735; giving an average of less than 4 tries).
alex_smart·2 anni fa
Excellent work!

We can also probably prove that 3 guesses are not enough by some sort of adversarial argument. That is, instead of having the color be fixed at the start, imagine that the game picks the colors adversarially to try to make the job of the guesser as difficult as possible, while remaining consistent with the answers it has already given. If we can pick a function for the adversary that does not fully disambiguate the color completely for any sequence of three guesses, we will be done.
penteract·2 anni fa
I wouldn't be surprised if there is a way of doing it in 4 guesses (3 to identify and a 4th that's known to be right), although you probably need to adjust the later guesses based on the results of the first. It wouldn't be impossible to search the space of strategies exhaustively. Precomputing the score function (and storing it as 4096*101 4096-bit bitstrings for efficient set intersection) would speed things up, and it could be a chance to use the 3D texture handling features of a GPU (I've done very little GPU programming so take my enthusiasm with a pinch of salt).
n2d4·2 anni fa
There's a way to do it in 4 guesses, I described it here: https://news.ycombinator.com/item?id=39888130
alex_smart·2 anni fa
I meant 3 tries in total, not just the random guesses.
n2d4·2 anni fa
Because the space is bounded and discrete, you can further optimize by triangulating smartly. If you always pick a triangulation point on the boundary, you will always end up with a single candidate as the other candidate will be out of bounds. (Due to discreteness, you can only pick a point near the boundary, but this will still work in a vast majority of cases.) That reduces the average to ~4.
SmartHypercube·2 anni fa
If we ignore the information contained in the score numbers, only comparing which score is higher, we could optimize using ternary search (or golden-section search). https://en.wikipedia.org/wiki/Golden-section_search

(Note that binary search does not apply here. This is searching for an extremum, not a zero point.)

    - Start at the range of 0-F, measure the score of 6 and 9 (2 tries)
    - Depending on which is higher, narrow the range to 0-9 or 6-F
    - Suppose the range is 0-9, measure the score of 3 and 6 (1 try. 6 is already measured)
    - Narrow the range to 0-6 or 3-9
    - Suppose the range is 0-6, measure the score of 2 and 3 (1 try. 3 is already measured)
    - The worse case is 3's score is higher. The range is now 2-6. Since 2, 3, 6 are all measured, in the worst case you need 2 more tries for 4 and 5.
    - The other case is 2's score is higher. The range is now 0-3 and 0, 2, 3 are all measured.
So in worst case there are 6 tries per slider. ~5 tries on average. I suspect this can be further optimized but I'll stop here :)
n2d4·2 anni fa
Here's a solution with ~3.27 average tries total (including the last guess). It works by spreading the possibilities across each of the 100 "score" buckets as evenly as possible (aka minimizing the variance).

It can identify more than half of all colors in just 2 guesses. If you edit the code to minimize the size of the largest bucket instead, you get an algorithm that has a slightly worse average case, but never needs more than 4 guesses.

Paste it in the site's browser console to try.

    function solve() {
      let possibleTargets = new Array(0x1000).fill(0).map((_, i) => i);
      while (true) {
        // for each possible guess, calculate the score-buckets
        const guessResults = possibleTargets.map((guess) => {  // for better brute-force, iterate through all colors, but this performs better (probably because we don't reward for guessing correctly in the current turn)
          const buckets = new Array(101).fill(0).map(() => []);
          for (const possibleTarget of possibleTargets) {
            buckets[calcScore(possibleTarget, guess)].push(possibleTarget);
          }
          return { guess, buckets };
        });

        // find guess with lowest variance
        const best = guessResults.sort((a, b) => calcVariance(a.buckets) - calcVariance(b.buckets))[0];

        // make the guess & update possible targets
        const sc = makeGuess(best.guess);
        if (sc >= 100) return "Success!";
        possibleTargets = best.buckets[sc];
      }
    }

    function calcVariance(buckets) { const maxBucketSize = Math.max(...buckets.map(b => b.length)); return buckets.reduce((acc, b) => acc + (b.length - maxBucketSize) ** 2, 0); }

    function deconstruct(color) { return [(color & 0xF00) >> 8, (color & 0x0F0) >> 4, (color & 0x00F)]; }

    function calcScore(target, guess) { return score(...deconstruct(target), ...deconstruct(guess)); }

    function makeGuess(guess) { [rr, gg, bb] = deconstruct(guess); submitInput(); return score(r, g, b, rr, gg, bb); };

    solve();
penteract·2 anni fa
That's great. What's the first guess? And does this prove that there is no way of identifying the answer in 2 guesses? I tried running a version of your code across all targets, but my current machine isn't up to it (and there are obviously more efficient ways that you've probably implemented).

I'd like to try out a few alternatives in place of your variance function. Something like b.length*log(b.length) to estimate the expected number of guesses, and perhaps using a version of log closer to ceil(log(x)/log(100)).
n2d4·2 anni fa
The first color is #015.

Regarding computing it for all targets, I optimized it by precomputing the value of guessResults in the first iteration, since it's always the same (no matter the target color), which saves most of the computation. I removed the optimization so the code wouldn't be so long here.
Taek·2 anni fa
You can do 2 guesses if you get lucky. If you want to assume worst possible luck you can't even do it in 3, you need 4.
penteract·2 anni fa
It's calculating distance in 3D space, scaled by the longest distance available. Without the scaling (and ignoring the rounding for the moment), distances from the target to any 3 non-collinear points would narrow it down to at most 2 options, regardless of the precision required on each axis; giving a 50% chance to get it on guess 3 and a 50% chance to get it on guess 4.

With the scaling, it can still be thought of as a problem of intersecting spheres, but the spheres begin to look quite strange since the distance function isn't symmetric. For example if your first guess was a corner of the cube, 1/8 of the space would have the same score (0%) since you've picked the furthest available point. This probably could be analyzed in the same way as above, since the 'spheres' centered at non-corner points aren't degenerate, and their intersections probably still have the right topological dimensions (dropping by 1 each time you add a new sphere, so 3 spheres are still likely to take you to a finite set of points in the continuous case) but that would require some work to prove.

Since we still need to consider the loss of precision from rounding, we can just look at this as a discrete problem and try to find a tuple of points that are sufficient to distinguish everything. It took a me couple of attempts, but the following 4 tetrahedrally arranged ones work: [11,7,4],[4,4,8],[11,8,11],[4,11,7].

There might be a smaller set that work, it would take ~2^48 work to exhaustively search for 3 points that could distinguish everything, and it might be possible to do better since you can choose the second point based on results from the first.
mg·2 anni fa
So after calculating the 4 scores for [11,7,4],[4,4,8],[11,8,11],[4,11,7] we can put the 4 scores into a formula and it outputs the correct 3 values? Which formula would that be?
penteract·2 anni fa
I didn't have a formula, just a Javascript object with 4096 keys. You could try to use a formula, but the rounding would make it quite blurry, so an "exact" answer wouldn't necessarily be right.
penteract·2 anni fa
Here's the code to generate the object and check that it works: https://gist.github.com/penteract/8957d7d18a60f021d8d74ef2f4...
CobrastanJorji·2 anni fa
This is beautiful! Simple and effective.
pinkmuffinere·2 anni fa
You should be able to use BFGS to search for the optimal vector [r, g, b] [1]. BFGS estimates the hessian, and then takes a step in the right direction, so you don’t need any derivatives (the score should be enough).

[1] https://en.wikipedia.org/wiki/Broyden%E2%80%93Fletcher%E2%80...
KineticLensman·2 anni fa
I just tried this and it took 12 goes to get "12) #02C (Splendid!)". Admittedly the target colour was very blueish, so I started with the blue slider and then added a couple of green clicks.
kevin_thibedeau·2 anni fa
Binary search on each channel is the optimal general solution without starting from an educated guess on the first try. This is how a successive approximation ADC performs a conversion.
Taek·2 anni fa
You can do a lot better than binary search because you get a weighted score for each guess.
saintradon·2 anni fa
What is this next best option called? A weighted binary search?
nvader·2 anni fa
Could you binary search on the slider to find the optimum?
elsombrero·2 anni fa
you 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
cjk2·2 anni fa
This 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...
Vvector·2 anni fa
There is a boardgame with this theme. First clue is just one word. Second clue is two words. Everyone places a pawn on their color guess. Points awarded based on distance. Easy to play.

https://boardgamegeek.com/boardgame/302520/hues-and-cues
geoduck14·2 anni fa
This is a good game if you want to be able to hold a conversation with thr people you are playing with. It gets people talking about their experiences. I've played with my own wife and learned about how much she watched TV as a child (did you know Barney changed costumes?), what she thinks of nacho cheese, lipstick, and more.

It is good for people you know as well as people you don't know. The only situation I don't recommend it is if someone in your group wants to win something because the "win" factor is weak.
ketzo·2 anni fa
Oh my god the Barney thing has come up with every single group I've ever played that game with. Blew my mind the first time, then proceeded to blow everyone's minds every game after :D

(y'know, as much as one's mind can be blown by trivia about a children's tv show)
salomon812·2 anni fa
Yes! This game is a lot of fun. My only gripe with it is that the red area is small and the green area is huge, and that's really minor complaint. With the right people this game is amazing.
hamburglar·2 anni fa
Now do it by answering with words interpreted as colors using the Netscape algorithm.

I once read a blog post here about how Netscape interpreted colors that are words but aren’t in the official name list, and it comes down to tossing out the non-hex characters and padding/chunking the remaining characters to make RGB numbers, so “dumptruck” might end up being yellow because it ends up being DC0. I immediately wrote a little app that interpreted all the words in /usr/share/dict/words and stuck them in a sqlite db with Lab color representations so you could query for the nearest phony color word for a specific RGB you wanted. It just showed the 100 best matches sorted by closeness, written in their actual color. Fun little spur of the moment evening project.
rrr_oh_man·2 anni fa
A picture taken with a Soviet camera, late 1980's, nostalgia and teddy bears, carpets on the wall, dark wood juxtaposed with the lightness of youth.
cjk2·2 anni fa
That'd be a distinct #66666 ... very boring middle grey. But not too bright.

This would of course just be the median colour. It'd be black and white film because it was cheaper, completely incorrectly exposed so that the blacks were bang at the bottom and the film would be much too high an ISO so it'd be grainy as hell. And there would be someone with a really bad hair cut smoking in it.

Source: still own my Zenit from back then :)
rrr_oh_man·2 anni fa
Oooh, maybe you know:

What camera / film might have been used for those sepia pictures I keep finding in my family’s old stuff?

Btw: That description with the black blacks was bang-on. Also the smoking, and the haircuts.
cjk2·2 anni fa
The sepia pictures are probably that colour because of the toner that was used at the time when they were printed. The silver halides used in photographic paper weren't very stable and were still quite light sensitive. Sepia toner, as well as giving an artistic view, were used to convert the unstable halides to silver sulfide which lasted a hell of a lot longer (as you found out :)

So not film or camera specific really.
tetris11·2 anni fa
A melancholy purple reminiscent of the twilight depicted in childrens books, 1910, colorized.
comradesmith·2 anni fa
#8855aa
cjk2·2 anni fa
eeeeff
rrr_oh_man·2 anni fa
, exhaled Clara, 'Do you really want to go that stupid dance?'
tetris11·2 anni fa
"FACADE" came the reply
[deleted]·2 anni fa
benrutter·2 anni fa
OK 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·2 anni fa
ffcc33

I'm going on supermarket starfruit here so might be a bit off :)
johnisgood·2 anni fa
Maybe something darker like e5b934? I think we are better off giving ranges though. :P
rrr_oh_man·2 anni fa
It's Hog Plum, if you google it. #FBCP001.

I'm disgusted and enraged. Really liked the answers better.
benrutter·2 anni fa
Yeah the answers seem like nicer colors, pretty close but too little green? #ffcc33 is beautiful btw
pavlov·2 anni fa
After 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.)
seabass·2 anni fa
This 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·2 anni fa
I noticed that percentages are not quite accurate to perception when color is really close (it seems to cap at 95%).
ldjb·2 anni fa
It's not linked to from the page, but here's the GitHub repo for anyone interested:

https://github.com/susam/myrgb
bbx·2 anni fa
It'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·2 anni fa
Completely 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.
pteraspidomorph·2 anni fa
I got the first one in a single guess and now I'm afraid it can only go downhill from here...
antonpuz·2 anni fa
What'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
Timwi·2 anni fa
Would love to try a “Guess my HSL” spinoff.
speedgoose·2 anni fa
And a guess OKlab.

https://bottosson.github.io/posts/oklab/
rikroots·2 anni fa
Not 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
p4bl0·2 anni fa
Very 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.
neogodless·2 anni fa
I 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.
p4bl0·2 anni fa
Oh, that's probably it!
miggol·2 anni fa
The 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.
otherme123·2 anni fa
94% 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.
aiprogress·2 anni fa
I don't think that's possible. When I tried it, if you only pick one number the percentage match goes up or down.
hivacruz·2 anni fa
For 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.
penteract·2 anni fa
I 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.
jacknews·2 anni fa
There are a lot of similar games, eg 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·2 anni fa
<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)
susam·2 anni fa
Thanks for the bug report. This should be fixed now!
SmartHypercube·2 anni fa
Exact same behavior here. I got it in 24 guesses. New Game doesn't change the color and guesses show NaN%.

(Windows Chrome)
xandrius·2 anni fa
Try on Android Firefox.
brk·2 anni fa
Same safari mobile.
Davidzheng·2 anni fa
same (desktop firefox)
lukew3·2 anni fa
I 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/
elyobo·2 anni fa
Fun game, a convenient wordle style social media sharing utility would spread the word. Not sure what would work.
animaomnium·2 anni fa
One 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.
keepamovin·2 anni fa
Really 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·2 anni fa
Thank 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·2 anni fa
You’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.
[deleted]·2 anni fa
azeemba·2 anni fa
Ha this reminds me of a game me and my friend made a few years ago: http://rbgnrgb.com/

You play as RBG fighting monsters with different RGB values.
imacomputer·2 anni fa
Nice! 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
nurple·2 anni fa
Reminds 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
indigoabstract·2 anni fa
It would be interesting to know what type of people would find this game amusing..

Since I'm one of them, perhaps programmers?
taylorius·2 anni fa
I 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!
doctorhandshake·2 anni fa
Vaguely reminiscent of Specimen by Charlie Whitney and Erica Gorochow https://playspecimen.com/ … a great game if you haven’t tried it, and unusually revealing about the limits of perception.
ssimono·2 anni fa
Reminds me of something similar I made a few years ago: https://github.com/ssimono/hexliterate It still works, that's a multiplayer real-time game
bun_terminator·2 anni fa
Fun! Spill your scores. I can usually get within 85%, had one perfect out of 10. And one 70%
Applejinx·2 anni fa
I 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.
B1FF_PSUVM·2 anni fa
Five games, number of tries to "Splendid!": 9, 4, 11, 19, 8

(Burnt orange, bright yellow, light blue, shock pink, dark blue)
envp·2 anni fa
So far I’ve gotten to the end for a few colors. Quite fun, took my about 20-30 guesses!
a_e_k·2 anni fa
Fun! 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. :-)
trashtensor·2 anni fa
8-12 attempts to get the color seems to be the range i tend to land in.
johnisgood·2 anni fa
2 games, one was correct at the 27th try, the second one at the 14th.
williameckert·2 anni fa
First game: 77 % on the first try, Splendid! on the second.
thehucklecat·2 anni fa
i got 6. surprised that it was that few, I figured it would take forever.
sidedishes·2 anni fa
This is very nice! Someone I know made one of these too a while back with a similar UI - https://gkpotter.com/projects/rgb/
hunter2_·2 anni fa
Reminds 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.
yakkomajuri·2 anni fa
As 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·2 anni fa
This 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.
pierrelf·2 anni fa
Amazing! Just needs an expert mode with 0-255 and alpha channel
pavlov·2 anni fa
Real expert mode is guessing CIE 1931 XYZ values in a windowless room with a carefully calibrated display and ambient lighting.
LoganDark·2 anni fa
You also might need calibrated eyes. (My left and right eyes don't see the same colors.)
zafka·2 anni fa
Reminds me of this: http://yizzle.com/whatthehex/
xzel·2 anni fa
This is awesome! I would love a GeoGuessr style gameplay element and watch my design friends compete over a couple of beers!
DangerousPie·2 anni fa
Fun! 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!
teensydata·2 anni fa
It's funny that I made a website exactly like this a few months ago. It was supposed to be Wordle for colors
blt·2 anni fa
Curious if anyone can see the difference between #DD2 and #DD3. It was impossible on my 2013 Retina Macbook.
chrisjj·2 anni fa
I can on Samsung phone. But the difference is tiny. You found two of the closest colours in the space.
leononame·2 anni fa
Just joining in on the canon that this is incredibly fun, much more than I would've anticipated
somedude895·2 anni fa
I sometimes play this with people at work. Point at something in the office and guess the RGB.
salomon812·2 anni fa
For those that love this game (as I do) I recommend "I Love Hue" for mobile.
blt·2 anni fa
Agree, 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.
[deleted]·2 anni fa
htk·2 anni fa
I LOVE this. I'll become RGBruceLee if I play this enough.
tamimio·2 anni fa
Love it, first one took 15 steps, second one took only 4!
ramshanker·2 anni fa
22) #5A7 (Splendid!)
chrisjj·2 anni fa
Bug? #952 shows matching colour but scores only 94%.

Android Chrome.
susam·2 anni fa
The 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
chrisjj·2 anni fa
Thanks. Colour was identical.
jstanley·2 anni fa
I 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·2 anni fa
Certainly something odd is happening.
otherme123·2 anni fa
RGB 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.
[deleted]·2 anni fa
CuriouslyC·2 anni fa
Landed 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?
kookamamie·2 anni fa
Is the guessing done in linear or sRGB space?
mldbk·2 anni fa
Randomly got from first attempt
junon·2 anni fa
This is a lot of fun :)
ricardo81·2 anni fa
Only took me 18 guesses. Should've thought about ROYBGIV a bit before guessing.
ldjb·2 anni fa
Heads-up: It's ROYGBIV
ricardo81·2 anni fa
Pretty fundamental to this situation :-) cheers.
new_user_final·2 anni fa
Took me 42 guesses.
yoyopa·2 anni fa
isn't this HEX? RGB is usually 0-255 or 0 to 1
stanleykm·2 anni fa
it is rgb just 4 bits per channel instead of 8
chrismorgan·2 anni fa
#f09 hurt.
panchtatvam·2 anni fa
Loved it !
mirlind_guri22·2 anni fa
hack pasword snapchat
nick238·2 anni fa
Did it work?
mirlind_guri22·2 anni fa
snap hack paswordp
mirlind_guri22·2 anni fa
hack pasword
mansarip·2 anni fa
my eyes!
florid·2 anni fa
haritahari·2 anni fa
haritahari·2 anni fa