Nice job. Kind of reminds me of this one which increases the number of squares with the odd-one out becoming more subtle as you progress further in the game, but I prefer your sliding mechanic better for this kind of game.
Ooh this one is fun too! Though it doesn't get quite as hard as the slider one. Breezed through all 47 levels of this pretty easily while there were one or two impossible seeming ones in the slider.
hatthew 1 days ago [-]
To me this seems primarily like an aim test, not a color perception test
vunderba 1 days ago [-]
It feels like a bit of both - the faster you're able to perceive the differing square, the faster you're able to navigate to it.
OisinMoran 1 days ago [-]
This is fun! I just played once and got 0.0016, which it says is "absurdly below the theoretical limit"...
Okay, tried again and got 0.0034 which is still says is beyond the human limit! I'll have to give this to my mum because we often argue about colours and I suspect she might be a tetrachromat.
Both tests on a Pixel 10 btw
snarkconjecture 1 days ago [-]
Tetrachromacy wouldn't affect a test taken through a phone screen.
erikig 2 days ago [-]
On a good monitor, I got to 0.0032 and then it all fell apart.
The code contains a function that, given the target ΔE, generates two colors in floating-point Oklab representation, separated by that distance. But there is no check whether the two generated colors end up rounding to exactly the same one on 8-bit displays. So, I was asked to find a boundary (while the claim was that there were two distinct colors 0.0013 ΔE apart) between RGB(80, 83, 152) and RGB(80, 83, 152). Obviously unfair.
Keithamus 2 days ago [-]
I will get around to fixing this. An oversight. Apologies.
patrakov 20 hours ago [-]
Another issue is that it discards the color pair if the generated coordinates fall outside 100% sRGB. The problem here is that many low-end laptop displays cover significantly less than 100% sRGB, but come with the correct primaries in the EDID, thus causing browsers to display colors correctly if they can and clip colors if they can't. Colors too close to the sRGB boundary will be clipped in your game - different colors generated, different colors when converted to sRGB, same color on the screen because it is out of the screen gamut. Maybe it makes sense to avoid colors with more than 60% saturation?
rda2 1 days ago [-]
I hope you post this again when you do - I was presented with the "0.00080" difference a couple times, and it looks like this is where it becomes actually impossible because of this issue.
refulgentis 1 days ago [-]
Are you using Oklab channels to measure delta-E / difference? If so, Oklab is a hacky way to approximate a real colorspace with just one matrix multiplication, the channels have no meaning and are not related to delta-E. Use real Lab*, it'll take 10 minutes with an LLM.
EDIT: Just read the blog post. I thought HSL was bad for design, Oklab is much worse. It just goes right ahead and reuses color science terms so it sounds it got it all right. (dEOK existing and its "JND" being 0.02 absolutely made my head spin. None of this is recognizable to a color scientist)
john_strinlai 12 hours ago [-]
>dEOK existing and its "JND" being 0.02 absolutely made my head spin. None of this is recognizable to a color scientist
isnt it just because the lightness scale is 0-1 instead of 0-100? i would like to learn more about this, and your comments are contrary to what i see on, for example, https://www.w3.org/TR/css-color-4/
"In CIE Lab color space, where the range of the Lightness component is 0 to 100, using deltaE2000, one JND is 2. Because the range of Lightness in Oklab and OkLCh is 0 to 1, using deltaEOK, one JND is 100 times smaller."
if youd rather just point in the direction of where to read more, that would be fine too. i assumed (wrongly?) that the CSS color specification would be accurate. or, at least, accurate enough to not make heads spin. (any ideas on why w3 got it so wrong? or why they would use OKlab at all, if it is as utterly awful as you imply?)
refulgentis 11 hours ago [-]
> "In CIE Lab color space, where the range of the Lightness component is 0 to 100, using deltaE2000, one JND is 2. Because the range of Lightness in Oklab and OkLCh is 0 to 1, using deltaEOK, one JND is 100 times smaller."
It's very correct - but the implications must not be clear.
In the CIELAB space (read: a scientific space), JND is 2. (3 is color science version, but a minor quibble)
In OKLab space, we'll say it's the same, and then account for normalized lightness.
Oklab's lightness isn't CIELAB's lightness, neither are their dimensions the same, so it's like saying "when we measure in kilometers, a Just Noticable Distance is 2 meters. Miles is scaled differently then normalized, but we'll just say it's 2 yards." (and that's being too kind, in practice, 2m ~= 2 yards, and I don't want to give the impression it's a simple linear scaling difference. The example is meant to communicate they're different dimensions entirely)
> i assumed (wrongly?) that the CSS color specification would be accurate. or, at least, accurate enough to not make heads spin. (any ideas on why w3 got it so wrong? or why they would use OKlab at all, if it is as utterly awful as you imply?)
The thrust of my comment isn't that Oklab is so awful it should be banned, in fact, it's specifically mentioned as better than the incumbent. However, continued reusing of color science terminology, and people assuming that it then applies, is both remniscent of HSL and may worse intellectual poverty for software engineers, even the well-intentioned and studied, as it sounds unobjectionable at its face, but would be batshit insane if applied to synonymous areas of science that affect daily life (ex. distance)
john_strinlai 10 hours ago [-]
awesome, i appreciate the reply, thanks. most of this is all foreign to me, so i am missing a lot of the knowledge most of the things im finding & reading assume i have. the analogy helps.
refulgentis 10 hours ago [-]
Cheers, email in bio if you ever wanna shoot something off someone / get a hyper opinionated take (got lucky enough to be paid to cut through this jungle for ~2 years)
13 hours ago [-]
john_strinlai 2 days ago [-]
surprisingly fun.
not knowing anything about color, i will admit i am a bit confused. i scored 0.0034 and was told "if you're not already calibrating displays for a living, you're leaving money on the table". which, to me, implied i did quite well!
but, reading the scores posted here, most people are doing a lot better than me. i doubt all of us are crazy good...
so, i assume the front page is a typo: "most people land around 0.02" (should be 0.002, not 0.02)? if yes, then i am back to not understanding the message i got about calibrating displays, because i did quite a bit worse than 0.002.
edit: nerd-sniping myself a little bit. but it appears (stressing: i know nothing) the "0.02" is accurate, but calculated by showing someone two colors and asking "are these different" until the person answers the question correctly 50% of the time. which is a different question than "where, precisely, is the line between these two colors". with the different question, it ends up compressing the result down by about an order of magnitude.
Keithamus 2 days ago [-]
Right. The average score is under different test conditions. Obviously this game is a little silly version with very little accuracy to the lab testing, but hopefully it gets people thinking about this stuff a bit more! Which given your investigations into this, I would say it has succeeded.
john_strinlai 2 days ago [-]
>[...] but hopefully it gets people thinking about this stuff a bit more! Which given your investigations into this, I would say it has succeeded.
absolutely! thanks for posting it and the associated article.
itishappy 1 days ago [-]
I'm colorblind, but I ended up getting a 0.0028 "much better than average" score. Hmm... Fun site!
To promote some further reading:
OKLab isn't actually a perceptually uniform colorspace. It's better than others, but it was specifically chosen as a tradeoff between accuracy and speed (hence the name OK). When you start digging this deep, you quickly learn that we have yet to invent any perceptually uniform colorspaces; even the most precise models we have end up using fits and approximations. Color has some really inconvenient properties like depending strongly on brightness and background. Frankly, given the differences in human biology (having orders of magnitude differences in relative numbers of each cone, for instance), it's surprising we agree as much as we do! Human color perception is an endless pit of complexity.
(Note, I don't say any of this to detract from what you've built here, merely expand. Your site is awesome and I love it!)
Hammershaft 13 hours ago [-]
There might be selection effects in who posts their score. (got 0.0027 btw :p)
Ldorigo 4 hours ago [-]
Aside from display quality I wonder if humans are more perceptive to changes in specific colors? Towards the end of the game some examples felt impossible while others were trivial .
michaelteter 1 days ago [-]
0.0043.
But I think this kind of test can really be limited on your display and color profiles.
Most of my misses were on blues, but sometimes the line was obvious. Other times, I could “see” many phantom bars of slightly different colors.
And in bright sunlight, I can see variations in the film in my phone screen. I suspect this could affect a test like this.
yuppiepuppie 1 days ago [-]
Fun stuff! Ive added this to the HN Arcade - I think this is the first color based game on there :)
It helps if I move side to side like a party parrot. I'd love to see a histogram of where I stand.
beAbU 1 days ago [-]
There was a similar web-game back in the day but for tones. You had to identify which one was higher or lower. Also gave a statistical comparison at the end. Near the end the difference was a couple hertz or something, so next to impossible as well.
I can't find it now. Is anyone else aware of what I'm talking about?
If 0.02 is the JND of deltaEOK, how come everybody is getting results an order of magnitude smaller? Even the author himself (at https://www.keithcirkel.co.uk/too-much-color/) says they get 0.0028, but never elaborate on the significance of that result.
Keithamus 2 days ago [-]
JND is an average. A lot of people will do a lot worse. The measure, as I understand it, is also under different test conditions, while this is a game where people are on their own and able to - for example - tilt their head trying to find the exact angle to see the difference.
filmgirlcw 2 days ago [-]
This is such a cool deep dive into CSS colors and color theory and finding the right way to mess with color values.
pmoati 13 hours ago [-]
it's a clever idea but the perception of the color is not easy to have a graduated difficulty.
Plus, an alternative to the div might be to use the canvas to avoid cheating by watching the position of the gradient on the console :p
anyway, thank you ! i didn't clean my screen since 1 week, and this game need to !
I wish the test added a button that says "Same color" and some of the tests actually show the same color
ramon156 1 days ago [-]
This is probably a fun way of finding the median screen quality (in a world where no one has color blindness or any eye issues, so scrape 15-18% of the results away ig)
But now I'm aware of a slightly darker vertical band on my screen, compared to the rest of the display. x_x
coinfused 2 days ago [-]
Fun game! I could never quite clear the 0.0030 threshold. I wonder how much screen quality/calibration impacts it.
jaffathecake 2 days ago [-]
A lot. My scores:
- 0.0028 on my MacBook pro screen
- 0.0045 on my Dell monitor
- 0.0033 on my Pixel 10 pro
And those scores are pretty consistent.
vova_hn2 1 days ago [-]
0.0025
Had to turn off the "Night Light" (reducing blue) and set brightness to max.
dreday 2 days ago [-]
This takes something as nerdy as decimal places in CSS colors and turns it into a fun, practical read. It feels like you’re being walked through the rabbit hole by a friend who’s done way too much homework, then hands you a few simple rules you can actually remember and use.
filmgirlcw 2 days ago [-]
Super fun game! My best is 0.0018 but am usually in the ~0.0030 range
reader9274 10 hours ago [-]
0.00080 i guess im a machine
stonedge 2 days ago [-]
Is higher or lower "better"?
john_strinlai 2 days ago [-]
lower is better.
it is measuring the smallest color distance you can still detect. so a lower number means you can spot the difference between two more-alike colors.
Biganon 2 days ago [-]
0.0023, but now my eyes are tired
pestatije 2 days ago [-]
JND - Just Noticeable Difference - the smallest colour change that can actually be seen
opendeck 1 days ago [-]
This is fun!
whalesalad 1 days ago [-]
0.0028 -- I think a few of these surpassed the capabilities of my M2 air display.
zoklet-enjoyer 1 days ago [-]
That was fun. I got 0.0039
This reminds me that there's a worlde like game for color mixing, I think someone posted it on HN a while ago colorfle.com
Hamuko 15 hours ago [-]
Best I got was a 0.0016 on an OLED iPad Pro after cranking the brightness to max. With half brightness I only got to 0.0033.
zakki 1 days ago [-]
is 0.0052 good or bad?
dreday 2 days ago [-]
I thought I was good at this but I can’t get under 0.0050. I blame my screen!
Very addictive, kudos to the dev
swayam-41 14 hours ago [-]
great one for the brain, appreciated.
ludamn 1 days ago [-]
[dead]
ludamn 1 days ago [-]
[dead]
ezpzai 1 days ago [-]
[dead]
Rendered at 11:11:41 GMT+0000 (Coordinated Universal Time) with Vercel.
https://vectorization.eu/color-perception-test
Okay, tried again and got 0.0034 which is still says is beyond the human limit! I'll have to give this to my mum because we often argue about colours and I suspect she might be a tetrachromat.
Both tests on a Pixel 10 btw
Here's the related article on how much accuracy is really needed in CSS values. https://www.keithcirkel.co.uk/too-much-color/
The code contains a function that, given the target ΔE, generates two colors in floating-point Oklab representation, separated by that distance. But there is no check whether the two generated colors end up rounding to exactly the same one on 8-bit displays. So, I was asked to find a boundary (while the claim was that there were two distinct colors 0.0013 ΔE apart) between RGB(80, 83, 152) and RGB(80, 83, 152). Obviously unfair.
EDIT: Just read the blog post. I thought HSL was bad for design, Oklab is much worse. It just goes right ahead and reuses color science terms so it sounds it got it all right. (dEOK existing and its "JND" being 0.02 absolutely made my head spin. None of this is recognizable to a color scientist)
isnt it just because the lightness scale is 0-1 instead of 0-100? i would like to learn more about this, and your comments are contrary to what i see on, for example, https://www.w3.org/TR/css-color-4/
"In CIE Lab color space, where the range of the Lightness component is 0 to 100, using deltaE2000, one JND is 2. Because the range of Lightness in Oklab and OkLCh is 0 to 1, using deltaEOK, one JND is 100 times smaller."
if youd rather just point in the direction of where to read more, that would be fine too. i assumed (wrongly?) that the CSS color specification would be accurate. or, at least, accurate enough to not make heads spin. (any ideas on why w3 got it so wrong? or why they would use OKlab at all, if it is as utterly awful as you imply?)
It's very correct - but the implications must not be clear.
In the CIELAB space (read: a scientific space), JND is 2. (3 is color science version, but a minor quibble)
In OKLab space, we'll say it's the same, and then account for normalized lightness.
Oklab's lightness isn't CIELAB's lightness, neither are their dimensions the same, so it's like saying "when we measure in kilometers, a Just Noticable Distance is 2 meters. Miles is scaled differently then normalized, but we'll just say it's 2 yards." (and that's being too kind, in practice, 2m ~= 2 yards, and I don't want to give the impression it's a simple linear scaling difference. The example is meant to communicate they're different dimensions entirely)
> i assumed (wrongly?) that the CSS color specification would be accurate. or, at least, accurate enough to not make heads spin. (any ideas on why w3 got it so wrong? or why they would use OKlab at all, if it is as utterly awful as you imply?)
The thrust of my comment isn't that Oklab is so awful it should be banned, in fact, it's specifically mentioned as better than the incumbent. However, continued reusing of color science terminology, and people assuming that it then applies, is both remniscent of HSL and may worse intellectual poverty for software engineers, even the well-intentioned and studied, as it sounds unobjectionable at its face, but would be batshit insane if applied to synonymous areas of science that affect daily life (ex. distance)
not knowing anything about color, i will admit i am a bit confused. i scored 0.0034 and was told "if you're not already calibrating displays for a living, you're leaving money on the table". which, to me, implied i did quite well!
but, reading the scores posted here, most people are doing a lot better than me. i doubt all of us are crazy good...
so, i assume the front page is a typo: "most people land around 0.02" (should be 0.002, not 0.02)? if yes, then i am back to not understanding the message i got about calibrating displays, because i did quite a bit worse than 0.002.
edit: nerd-sniping myself a little bit. but it appears (stressing: i know nothing) the "0.02" is accurate, but calculated by showing someone two colors and asking "are these different" until the person answers the question correctly 50% of the time. which is a different question than "where, precisely, is the line between these two colors". with the different question, it ends up compressing the result down by about an order of magnitude.
absolutely! thanks for posting it and the associated article.
To promote some further reading:
OKLab isn't actually a perceptually uniform colorspace. It's better than others, but it was specifically chosen as a tradeoff between accuracy and speed (hence the name OK). When you start digging this deep, you quickly learn that we have yet to invent any perceptually uniform colorspaces; even the most precise models we have end up using fits and approximations. Color has some really inconvenient properties like depending strongly on brightness and background. Frankly, given the differences in human biology (having orders of magnitude differences in relative numbers of each cone, for instance), it's surprising we agree as much as we do! Human color perception is an endless pit of complexity.
(Note, I don't say any of this to detract from what you've built here, merely expand. Your site is awesome and I love it!)
But I think this kind of test can really be limited on your display and color profiles.
Most of my misses were on blues, but sometimes the line was obvious. Other times, I could “see” many phantom bars of slightly different colors.
And in bright sunlight, I can see variations in the film in my phone screen. I suspect this could affect a test like this.
https://hnarcade.com/games/games/what-s-my-jnd
I tried it on a recent Pixel with brightness set to two-thirds, and this is my result:
https://www.keithcirkel.co.uk/whats-my-jnd/?r=ArggKP__c4_b
It helps if I move side to side like a party parrot. I'd love to see a histogram of where I stand.
I can't find it now. Is anyone else aware of what I'm talking about?
anyway, thank you ! i didn't clean my screen since 1 week, and this game need to !
0.000020 ^^ https://www.keithcirkel.co.uk/whats-my-jnd/?r=AAIoKP
But now I'm aware of a slightly darker vertical band on my screen, compared to the rest of the display. x_x
- 0.0028 on my MacBook pro screen
- 0.0045 on my Dell monitor
- 0.0033 on my Pixel 10 pro
And those scores are pretty consistent.
Had to turn off the "Night Light" (reducing blue) and set brightness to max.
it is measuring the smallest color distance you can still detect. so a lower number means you can spot the difference between two more-alike colors.
This reminds me that there's a worlde like game for color mixing, I think someone posted it on HN a while ago colorfle.com
Very addictive, kudos to the dev