Guess my RGB

A melancholy purple reminiscent of the twilight depicted in childrens books, 1910, colorized.

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.

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)

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

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.

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.

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()

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.

Could you binary search on the slider to find the optimum?

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

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.

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.

So far I’ve gotten to the end for a few colors. Quite fun, took my about 20-30 guesses!

First game: 77 % on the first try, Splendid! on the second.

8-12 attempts to get the color seems to be the range i tend to land in.

2 games, one was correct at the 27th try, the second one at the 14th.

Five games, number of tries to "Splendid!": 9, 4, 11, 19, 8

(Burnt orange, bright yellow, light blue, shock pink, dark blue)

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.

Try on Android Firefox.

Thanks for the bug report. This should be fixed now!

Same safari mobile.

Exact same behavior here. I got it in 24 guesses. New Game doesn't change the color and guesses show NaN%.

(Windows Chrome)

same (desktop firefox)

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.

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.

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))
      }

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.

I don't think that's possible. When I tried it, if you only pick one number the percentage match goes up or down.

Heads-up: It's ROYGBIV

Took me 42 guesses.

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

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.

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.

Real expert mode is guessing CIE 1931 XYZ values in a windowless room with a carefully calibrated display and ambient lighting.

And a guess OKlab.

https://bottosson.github.io/posts/oklab/

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

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.

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.

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.