Guess my RGB
talonx
a year ago
618
144
https://susam.net/myrgb.html
pierrelfa year ago
Amazing! Just needs an expert mode with 0-255 and alpha channel
pavlovpierrelfa year ago
Real expert mode is guessing CIE 1931 XYZ values in a windowless room with a carefully calibrated display and ambient lighting.
LoganDarkpavlova year ago
You also might need calibrated eyes. (My left and right eyes don't see the same colors.)
pavlova year ago
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.)

bun_terminatora year ago
Fun! Spill your scores. I can usually get within 85%, had one perfect out of 10. And one 70%
envpbun_terminatora year ago
So far I’ve gotten to the end for a few colors. Quite fun, took my about 20-30 guesses!
a_e_kenvpa year ago
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. :-)

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

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

williameckertbun_terminatora year ago
First game: 77 % on the first try, Splendid! on the second.
Applejinxbun_terminatora year ago
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.
johnisgoodbun_terminatora year ago
2 games, one was correct at the 27th try, the second one at the 14th.
trashtensorbun_terminatora year ago
8-12 attempts to get the color seems to be the range i tend to land in.
thehucklecatbun_terminatora year ago
i got 6. surprised that it was that few, I figured it would take forever.
DangerousPiea year ago
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!
panchtatvama year ago
Loved it !
Timwia year ago
Would love to try a “Guess my HSL” spinoff.
speedgooseTimwia year ago
rikrootsTimwia year ago
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
ricardo81a year ago
Only took me 18 guesses. Should've thought about ROYBGIV a bit before guessing.
ldjbricardo81a year ago
Heads-up: It's ROYGBIV
ricardo81ldjba year ago
Pretty fundamental to this situation :-) cheers.
new_user_finalricardo81a year ago
Took me 42 guesses.
p4bl0a year ago
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.

aiprogressp4bl0a year ago
I don't think that's possible. When I tried it, if you only pick one number the percentage match goes up or down.
otherme123p4bl0a year ago
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.
miggolp4bl0a year ago
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.

neogodlessp4bl0a year ago
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.
p4bl0neogodlessa year ago
Oh, that's probably it!
chrisjja year ago
Bug? #952 shows matching colour but scores only 94%.

Android Chrome.

jstanleychrisjja year ago
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.

chrisjjjstanleya year ago
Certainly something odd is happening.
otherme123chrisjja year ago
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.
susamchrisjja year ago
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

chrisjjsusama year ago
Thanks. Colour was identical.
leononamea year ago
Just joining in on the canon that this is incredibly fun, much more than I would've anticipated
somedude895a year ago
I sometimes play this with people at work. Point at something in the office and guess the RGB.
ramshankera year ago
22) #5A7 (Splendid!)
elyoboa year ago
Fun game, a convenient wordle style social media sharing utility would spread the word. Not sure what would work.
animaomniumelyoboa year ago
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.

mga year ago
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.

elsombreromga year ago
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
tetris11mga year ago
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()
js4evertetris11a year ago
Not bad, 18 to 43 attempts on 10 games I tried. Far from optimal but good enough :p
tetris11js4evera year ago
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.
sleepingresettetris11a year ago
how do you run this?
andy_pppsleepingreseta year ago
I imagine pasting into the JS console after inspecting the page?
sleepingresetandy_pppa year ago
nvm thought it was bugged. user issue not code
sunnynagamtetris11a year ago
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();

tetris11sunnynagama year ago
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.
SmartHypercubemga year ago
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 :)
alex_smartmga year ago
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.
n2d4alex_smarta year ago
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.
penteractalex_smarta year ago
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_smartpenteracta year ago
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.

penteractalex_smarta year ago
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).
n2d4penteracta year ago
There's a way to do it in 4 guesses, I described it here: https://news.ycombinator.com/item?id=39888130
alex_smartpenteracta year ago
I meant 3 tries in total, not just the random guesses.
KineticLensmanmga year ago
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.
penteractmga year ago
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.

mgpenteracta year ago
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?
penteractmga year ago
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.
penteractpenteracta year ago
Here's the code to generate the object and check that it works: https://gist.github.com/penteract/8957d7d18a60f021d8d74ef2f42d4d03
CobrastanJorjipenteracta year ago
This is beautiful! Simple and effective.
nvadermga year ago
Could you binary search on the slider to find the optimum?
n2d4mga year ago
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();
penteractn2d4a year ago
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)).

Taekpenteracta year ago
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.
n2d4penteracta year ago
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.

kevin_thibedeaumga year ago
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.
Taekkevin_thibedeaua year ago
You can do a lot better than binary search because you get a weighted score for each guess.
saintradonTaeka year ago
What is this next best option called? A weighted binary search?
pinkmuffineremga year ago
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%93Goldfarb%E2%80%93Shanno_algorithm?wprov=sfti1

ldjba year ago
It's not linked to from the page, but here's the GitHub repo for anyone interested:

https://github.com/susam/myrgb

cjk2a year ago
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...

benruttercjk2a year ago
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)

cjk2benruttera year ago
ffcc33

I'm going on supermarket starfruit here so might be a bit off :)

johnisgoodcjk2a year ago
Maybe something darker like e5b934? I think we are better off giving ranges though. :P
rrr_oh_manjohnisgooda year ago
It's Hog Plum, if you google it. #FBCP001.

I'm disgusted and enraged. Really liked the answers better.

benrutterrrr_oh_mana year ago
Yeah the answers seem like nicer colors, pretty close but too little green? #ffcc33 is beautiful btw
tetris11cjk2a year ago
A melancholy purple reminiscent of the twilight depicted in childrens books, 1910, colorized.
cjk2tetris11a year ago
eeeeff
rrr_oh_mancjk2a year ago
, exhaled Clara, 'Do you really want to go that stupid dance?'
tetris11rrr_oh_mana year ago
"FACADE" came the reply
comradesmithtetris11a year ago
#8855aa
Vvectorcjk2a year ago
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

geoduck14Vvectora year ago
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.

ketzogeoduck14a year ago
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)

salomon812Vvectora year ago
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.
rrr_oh_mancjk2a year ago
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.
cjk2rrr_oh_mana year ago
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_mancjk2a year ago
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.

cjk2rrr_oh_mana year ago
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.

hamburglarcjk2a year ago
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.

keepamovina year ago
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!

susamkeepamovina year ago
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.
keepamovinsusama year ago
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.

zafkaa year ago
Reminds me of this: http://yizzle.com/whatthehex/
junona year ago
This is a lot of fun :)
yakkomajuria year ago
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.
mmahemoffa year ago
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.
jacknewsa year ago
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.

skobesa year 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)

xandriusskobesa year ago
Try on Android Firefox.
Davidzhengskobesa year ago
same (desktop firefox)
SmartHypercubeskobesa year ago
Exact same behavior here. I got it in 24 guesses. New Game doesn't change the color and guesses show NaN%.

(Windows Chrome)

brkskobesa year ago
Same safari mobile.
susamskobesa year ago
Thanks for the bug report. This should be fixed now!
penteracta year ago
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.
lukew3a year ago
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/
sidedishesa year ago
This is very nice! Someone I know made one of these too a while back with a similar UI - https://gkpotter.com/projects/rgb/
kookamamiea year ago
Is the guessing done in linear or sRGB space?
doctorhandshakea year ago
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.
nurplea year ago
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

bbxa year ago
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.

Daubbbxa year ago
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.

mansaripa year ago
my eyes!
antonpuza year ago
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

CuriouslyCa year ago
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?
azeembaa year ago
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.

ssimonoa year ago
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
chrismorgana year ago
#f09 hurt.
seabassa year ago
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!
ivanjermakovseabassa year ago
I noticed that percentages are not quite accurate to perception when color is really close (it seems to cap at 95%).
htka year ago
I LOVE this. I'll become RGBruceLee if I play this enough.
mirlind_guri22a year ago
snap hack paswordp
mirlind_guri22a year ago
hack pasword
mirlind_guri22a year ago
hack pasword snapchat
nick238mirlind_guri22a year ago
Did it work?
salomon812a year ago
For those that love this game (as I do) I recommend "I Love Hue" for mobile.
bltsalomon812a year ago
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.

tamimioa year ago
Love it, first one took 15 steps, second one took only 4!
blta year ago
Curious if anyone can see the difference between #DD2 and #DD3. It was impossible on my 2013 Retina Macbook.
chrisjjblta year ago
I can on Samsung phone. But the difference is tiny. You found two of the closest colours in the space.
hivacruza year ago
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.

mldbka year ago
Randomly got from first attempt
teensydataa year ago
It's funny that I made a website exactly like this a few months ago. It was supposed to be Wordle for colors
pteraspidomorpha year ago
I got the first one in a single guess and now I'm afraid it can only go downhill from here...
yoyopaa year ago
isn't this HEX? RGB is usually 0-255 or 0 to 1
stanleykmyoyopaa year ago
it is rgb just 4 bits per channel instead of 8
imacomputera year ago
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

tayloriusa year ago
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!
hunter2_a year ago
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.
indigoabstracta year ago
It would be interesting to know what type of people would find this game amusing..

Since I'm one of them, perhaps programmers?

xzela year ago
This is awesome! I would love a GeoGuessr style gameplay element and watch my design friends compete over a couple of beers!