I've always assumed minifiers were a kind of lossless compression. I guess this optimization makes it lossy? Even if we can't tell the difference between oklch(0.659432 0.304219 234.75238) and oklch(.659 .304 234.752) they're still different colors.
> The magic number to remember is the "Just Noticeable Difference" (JND). For dE00, JND is around 2.0. Below that, people struggle to tell two colours apart. Below 1.0, basically no one can.
Except for a tetrachromat. Specifically, a strong tetrachromat that has both four colour channels in the brain and a different frequency on the fourth cone.
Who are, admittedly, hella rare. Apparently there are less than a few dozen confirmed world-wide.
> admittedly, hella rare. Apparently there are less than a few dozen confirmed world-wide
What's actually hella rare is tests for tetrachromacy. Given the total number of people who have ever taken such a test, I think it's reasonable to assume there are significantly more than a few dozen actual tetrachromats out there.
Is that so? Our color perception is weird. It's one dimension split in three overlapping sectors. Adding a fourth sector may add information that makes it easier to distinguish colors.
We do have four sectors, 3 color perception and then the brightness perception that is used in the dark. In mid darkness you get a mix of all of those, although the fourth is not really perceived as a color so it can be a bit hard to use.
Brightness is another dimension, not a "sector" (as I dubbed it) on the color spectrum. But it would be equal for all subjects in a test, so it can't add information.
Something I think about often is an oliver sacks book about an ethnic group that has a particularly high rate of true monochromacy. And the people with no color perception at all are particularly adept at spotting certain plants based on some characteristic of their leaves that is obscured by color. So even removing information can change perception in surprising ways.
OTOH sacks seems to have fabricated a lot of shit over the years so who knows if this is even real. Another thing I think about a lot now.
And the eye cones not are sharp filter, they overlap ranges with mid-low sensibility. That must be nought to someone with Tetrachromacy to percibe something different on a RGB screen.
> More precisely, she had an additional cone type L′, intermediate between M and L in its responsivity, and showed 3 dimensional (M, L′, and L components) color discrimination for wavelengths 546–670 nm (to which the fourth type, S, is insensitive).
Source: Wikipedia
Thanks to a genetic variation I have a variation that may be similarly useful. I aced the JND test without contacts and with adaptive white balance enabled, and I already know from playing I Love Hue that my fidelity and velocity improves when I have stereo vision.
It turns out that my left and right eyes are skewed apart along a magenta/cyan axis. Left is more cyan, right is more magenta. It’s not as strong an effect as 3d glasses, maybe no more than a 1-2% light gel, and under normal circumstances I mostly don’t notice it unless I’m doing color matching work.
If I try to do color matching with one eye, it’s boringly fine - 0.0022 JND, same as everyone else above. I’ll get some things slightly wrong as usual, in patterns that make sense for the hue shift.
But when I use both eyes, the binocular process that leads to 3d vision also locks on to color differentials as well as spatial, and synthesizes imaginary color gradients out of flat surfaces diagonally from contrasting corner edges. It’s not a problem for writing on paper or anything, but if you give me a grid of flat paint chips I can order them by hue because their gradient depths are wrong — like, the whole sort by hue in 2d grid thing is just “equalize the difference vector intensity across the vector field” and that’s a nice relaxing thing to do, right? In essence, it’s sort of like MIMO 3x2 vs. normal vision’s 3x1 or tetrachromacy’s 4x1.
I know this isn’t true 4x1 tetrachromacy because I discovered, through the video game Intake (in which I reached 10th place on the world leaderboard), that my ability to snap-differentiate color is considerably more error prone when the two colors are the exact hues of magenta-cyan that my eyes differ by. Which makes sense: those would be my lowest fidelity colors, because they have the least distance from the differential centerline, so trying to figure out which eye to use causes little stutters in my color parsing and more frequent errors in outcome. If it was “the same tetrachromatic in both eyes” I wouldn’t have trouble telling magenta and cyan apart, because I’d have a fourth receptor with which to detect R/B vs G/B shifts easily by their B/T difference.
I’m not sure if this is a normal circumstance or not, but since my vision is extremely bizarre (-5 left, +2 right) and I can function and drive without eye correction due to forming partial stereo depth out of blurry hue fields from the left eye and telescopic light fields from the right, I think that growing up without eye correction forced my brain to use hue matching to stabilize my visual field in the absence of the usual higher-fidelity “both eyes have the same focal plane” convenience that most people have. And my depth perception remains to this day extremely flawed; it works, enough that I can drive with absolute precision, but I can’t catch a thrown object for crap and I occasionally parse 2d shapes with contrast interplay as 3d shapes and then realize a moment later that there is no 3d shape there — painted lines on a particularly damaged bit of road might at first blink read as a curb — b/c my depth perception was formed by prioritizing hue and contrast at a reflexive level.
There’s probably a formula somewhere that I could use to calculate the theoretical boost in hue SNR by modeling two towers, each with tri-frequency radio receivers with slightly offset frequencies, and then calculating the net boost effect of frequency trilateration across a spectrum for radio signals of different frequencies. Someday I hope learn enough about radio to document that and prove where my nodes of worsened acuity are! Not that it much matters, but what a fun test it would be.
Yes. The claim that you don't need more than 3 decimal places is laughable. Your artificial design doesn't need decimal points. At all. You probably can do even better by ignoring the last 4 bits completely.
That said, the article is very interesting, and that claim applies on different contexts. It's just aimed at the wrong one.
For gradients it definitely isn't unless you have the ability to do FRC dithering where the dither pattern changes every frame. The banding is very noticeable on a large enough screen.
Very interesting article, and the color picker is exceptionally revealing. As for the challenge, it stopped working in Firefox after the first half dozen examples; but on Chromium I got a decent .0042 Fun!
"This shouldn't be possible. I'm not saying that you cheated, but not not saying that."
0.0011. The quote seems a bit hyperbolic. There were maybe 2-3 that I didn't see and missed. 1-2 that I didn't hit perfectly but close enough. Display probably affects results (but didn't change any settings for this). I have a Dell IPS. I also moved my head around a bit, felt natural while trying to discern the colors.
I do have a good vision (including color). Reminds me of the other color-game where you order some colored boxes to form a spectrum.
Edit: just tried hard mode and got 0.0084. Missed maybe 3 that I couldn't see. Usually some magenta or blue colored. Grey and red / brown seem to be the easiest.
I got the same results you did. I think this is testing our monitors more so than our eyes. Given the forum we're on, I expect far better than average display devices being used which could help explain why basically everyone is doing far, far better than "average" according to the site.
I'm afraid to find out at this point... retinal damage combined with cataracts that I'm waiting to have a job with medical insurance to take care of... I used to be in the top 0.001% for color detection, now I know I'm very far from it. Especially towards dark and light brightness.
In the early 00's, I used two pro grade NEC flat panel monitors... they weighed a lot... my desk at that time had a permanent bow in the middle. It was around 2008 or so when I'd moved them a few times in a year and a half and decided to switch to flat panels... It became very clear to me around that time, that most people really didn't care about color accuracy in designs. Couldn't tell you how often I'd get "it doesn't look like our printed logo" only to adjust their monitor settings and voiala. Even then.
LCD flat panels are much easier to move around without killing your back. OLED is pretty amazing, but I've got to turn my brighness down a bit to make it tolerable... and I just about have to use dark mode. But there aren't many options in the 45" 3440x1440 display range, which is where I'm most comfortable today.
There's was 2 or 3 where i had no idea, guessed and was a way off.
There's was 1 where i did a hail Mary and got it. It was interesting how some even towards the end were really obvious and others were really subtle - I'd say I did better with purple tones and worst with the blue / greys.
Was fun and kind of meditative locking in like that – I noticed that the anti-glare coating on my screen introduces a visibly larger Δ than the later stages of the game (kind of a dithered "cloud" noise), making it quite a challenge. 0.0021 oneshot.
I'm color blind, and not even a little bit, but I scored 0.0084. I've noticed before that my perception of contrast is slightly better (than that of the people I ever compared it with; admitteldly, that's only a handful, but they weren't colorblind).
I got a 0.0035. I'm on a Dell U2724D monitor which is supposed to have decent color accuracy and I cranked up the brightness and contrast to a maximum so I'm sure that helped a somewhat. I also noticed squinting and closing my eyes for a bit sometimes helped when I felt stuck.
"Genuinely remarkable. You sailed past the theoretical human limit like it owed you money. I'd accuse you of cheating but I don't actually know how you'd cheat at this."
Replying to myself. I also tried this with both my Samsung S25+ phone and LG G5 TV and repeatedly scored in the 0.003-0.005 range on both so it doesn't seem like the display makes that much of a difference for me.
It depends on something about your screen at least. I first did it on a low quality monitor and it made the line between the two obvious even if I couldn't tell the colors apart. The "hard mode" one was impossible on that screen however.
0.0043, but to be honest, I could probably do better if I changed my monitor's settings. But I have it setup with low brightness for night time lights off viewing that won't wake me up.
This is an amazing deep dive into color difference measurements and how sensitive the math is. The idea that we really need to save characters - bytes - in CSS when we have so many web sites chewing through 49 MB with the enshitification of the web is hard to reconcile.
Ahhh, NASA numbers! My favourite, particularly in SVG files, and more recently in colours.
What is a NASA number?
Allegedly, within NASA, there is only a need for so many decimal places. If I can remember correctly, nine digits would get a spacecraft to land within a metre on the rock formerly known as the planet Pluto. So no need for that, unless you are going to 'occupy Pluto', building a few AI datacentres there.
In the context of SVG, usually it is icons that I encounter, where the artworker has exported something like a search icon, which is a circle and a line. These can be specified in SVG using integers, and single digit integers, if you really want, but let's make it two digits.
However, does the SVG file from the artworker have a viewbox containing a circle and a line? Nope. Instead you get one circle for the outer part of the circle in black and another smaller circle in white. Oh, and a line. The circles will be written as polygons with about two hundred vertices, with all vertices specified with NASA numbers (as I call them), typically six decimal places.
As a consequence, the file, which should be six lines of human readable code balloons to many kilobytes of nonsense. Yes, this can be put through SVGO but that will just remove some decimal places and make the file even less human readable.
As a developer, the simple file is great as the inevitable adjustments can be applied easily, maybe to make the icon bold or to adjust alignment within the viewbox. However, when given artworker files with NASA numbers, I then have to raise a ticket so that I can get the corrected file two weeks later from the guy sat in front of a massive Apple monitor with headphones welded on.
The reason for not using NASA numbers has nothing to do with bloat, as no optimisation will make up for the mountain of javascript the marketing guys have bundled into their Google Tag Manager, it has everything to do with efficient workflows.
Generally the customer does not care about fonts, colours and much else that designers fret over. If we went back to the 216 'web safe' colours of yesteryear (for CSS, not images), would anyone notice? If we could not load custom fonts, would most people notice? They might, but this would not prevent them from surfing the web.
lol, the website reminds me of tropes like the professional cleaner whose house is messy, the chef who eats instant noodles at home, or the haut couture fashion designer who only wears jeans and tees. The colour expert whose website is monochrome.
Maybe he understands the field so much that he prefers to exercise it minimally in his hobby. Or maybe he just can't decide. It also makes perfect sense for a study in colors to be against a neutral background.
I've always assumed minifiers were a kind of lossless compression. I guess this optimization makes it lossy? Even if we can't tell the difference between oklch(0.659432 0.304219 234.75238) and oklch(.659 .304 234.752) they're still different colors.
This reminds me of the amusing tendency of people to use the full double for recording lat/long of locations.
https://xkcd.com/2170/
> The magic number to remember is the "Just Noticeable Difference" (JND). For dE00, JND is around 2.0. Below that, people struggle to tell two colours apart. Below 1.0, basically no one can.
Except for a tetrachromat. Specifically, a strong tetrachromat that has both four colour channels in the brain and a different frequency on the fourth cone.
Who are, admittedly, hella rare. Apparently there are less than a few dozen confirmed world-wide.
But they do exist.
> admittedly, hella rare. Apparently there are less than a few dozen confirmed world-wide
What's actually hella rare is tests for tetrachromacy. Given the total number of people who have ever taken such a test, I think it's reasonable to assume there are significantly more than a few dozen actual tetrachromats out there.
Computer screens have three-dimensional color spaces. Tetrachromacy doesn't change that.
Is that so? Our color perception is weird. It's one dimension split in three overlapping sectors. Adding a fourth sector may add information that makes it easier to distinguish colors.
We do have four sectors, 3 color perception and then the brightness perception that is used in the dark. In mid darkness you get a mix of all of those, although the fourth is not really perceived as a color so it can be a bit hard to use.
Brightness is another dimension, not a "sector" (as I dubbed it) on the color spectrum. But it would be equal for all subjects in a test, so it can't add information.
Something I think about often is an oliver sacks book about an ethnic group that has a particularly high rate of true monochromacy. And the people with no color perception at all are particularly adept at spotting certain plants based on some characteristic of their leaves that is obscured by color. So even removing information can change perception in surprising ways.
OTOH sacks seems to have fabricated a lot of shit over the years so who knows if this is even real. Another thing I think about a lot now.
And the eye cones not are sharp filter, they overlap ranges with mid-low sensibility. That must be nought to someone with Tetrachromacy to percibe something different on a RGB screen.
> More precisely, she had an additional cone type L′, intermediate between M and L in its responsivity, and showed 3 dimensional (M, L′, and L components) color discrimination for wavelengths 546–670 nm (to which the fourth type, S, is insensitive). Source: Wikipedia
Thanks to a genetic variation I have a variation that may be similarly useful. I aced the JND test without contacts and with adaptive white balance enabled, and I already know from playing I Love Hue that my fidelity and velocity improves when I have stereo vision.
It turns out that my left and right eyes are skewed apart along a magenta/cyan axis. Left is more cyan, right is more magenta. It’s not as strong an effect as 3d glasses, maybe no more than a 1-2% light gel, and under normal circumstances I mostly don’t notice it unless I’m doing color matching work.
If I try to do color matching with one eye, it’s boringly fine - 0.0022 JND, same as everyone else above. I’ll get some things slightly wrong as usual, in patterns that make sense for the hue shift.
But when I use both eyes, the binocular process that leads to 3d vision also locks on to color differentials as well as spatial, and synthesizes imaginary color gradients out of flat surfaces diagonally from contrasting corner edges. It’s not a problem for writing on paper or anything, but if you give me a grid of flat paint chips I can order them by hue because their gradient depths are wrong — like, the whole sort by hue in 2d grid thing is just “equalize the difference vector intensity across the vector field” and that’s a nice relaxing thing to do, right? In essence, it’s sort of like MIMO 3x2 vs. normal vision’s 3x1 or tetrachromacy’s 4x1.
I know this isn’t true 4x1 tetrachromacy because I discovered, through the video game Intake (in which I reached 10th place on the world leaderboard), that my ability to snap-differentiate color is considerably more error prone when the two colors are the exact hues of magenta-cyan that my eyes differ by. Which makes sense: those would be my lowest fidelity colors, because they have the least distance from the differential centerline, so trying to figure out which eye to use causes little stutters in my color parsing and more frequent errors in outcome. If it was “the same tetrachromatic in both eyes” I wouldn’t have trouble telling magenta and cyan apart, because I’d have a fourth receptor with which to detect R/B vs G/B shifts easily by their B/T difference.
I’m not sure if this is a normal circumstance or not, but since my vision is extremely bizarre (-5 left, +2 right) and I can function and drive without eye correction due to forming partial stereo depth out of blurry hue fields from the left eye and telescopic light fields from the right, I think that growing up without eye correction forced my brain to use hue matching to stabilize my visual field in the absence of the usual higher-fidelity “both eyes have the same focal plane” convenience that most people have. And my depth perception remains to this day extremely flawed; it works, enough that I can drive with absolute precision, but I can’t catch a thrown object for crap and I occasionally parse 2d shapes with contrast interplay as 3d shapes and then realize a moment later that there is no 3d shape there — painted lines on a particularly damaged bit of road might at first blink read as a curb — b/c my depth perception was formed by prioritizing hue and contrast at a reflexive level.
There’s probably a formula somewhere that I could use to calculate the theoretical boost in hue SNR by modeling two towers, each with tri-frequency radio receivers with slightly offset frequencies, and then calculating the net boost effect of frequency trilateration across a spectrum for radio signals of different frequencies. Someday I hope learn enough about radio to document that and prove where my nodes of worsened acuity are! Not that it much matters, but what a fun test it would be.
> But they do exist
Do they?
Do you doubt genetic and microbiological science?
Eight bits of precision should be enough for everybody.
(It both is and isn't, depending on the use case, but I'm pretty sure nobody's design needs to make a difference between #123456 and #123457.)
Yes. The claim that you don't need more than 3 decimal places is laughable. Your artificial design doesn't need decimal points. At all. You probably can do even better by ignoring the last 4 bits completely.
That said, the article is very interesting, and that claim applies on different contexts. It's just aimed at the wrong one.
For gradients it definitely isn't unless you have the ability to do FRC dithering where the dither pattern changes every frame. The banding is very noticeable on a large enough screen.
He’s talking about minifying CSS colors and I’m not sure if it is what I think it is.
Do CSS minifier really adjust the colors in the CSS files to get better compression rates or to reduce the number of rules in the CSS?
The author’s minifier now does so, yes. I think you’d have to research further to decide if they’re the first to do so or not.
Very interesting article, and the color picker is exceptionally revealing. As for the challenge, it stopped working in Firefox after the first half dozen examples; but on Chromium I got a decent .0042 Fun!
What's My JND? 0.0089 Can you beat it? https://www.keithcirkel.co.uk/whats-my-jnd/?r=A30iKP__7_Hb #WhatsMyJND
https://www.keithcirkel.co.uk/whats-my-jnd/?r=AG4mKP____6_
"This shouldn't be possible. I'm not saying that you cheated, but not not saying that."
0.0011. The quote seems a bit hyperbolic. There were maybe 2-3 that I didn't see and missed. 1-2 that I didn't hit perfectly but close enough. Display probably affects results (but didn't change any settings for this). I have a Dell IPS. I also moved my head around a bit, felt natural while trying to discern the colors.
I do have a good vision (including color). Reminds me of the other color-game where you order some colored boxes to form a spectrum.
Edit: just tried hard mode and got 0.0084. Missed maybe 3 that I couldn't see. Usually some magenta or blue colored. Grey and red / brown seem to be the easiest.
I got the same results you did. I think this is testing our monitors more so than our eyes. Given the forum we're on, I expect far better than average display devices being used which could help explain why basically everyone is doing far, far better than "average" according to the site.
I'm afraid to find out at this point... retinal damage combined with cataracts that I'm waiting to have a job with medical insurance to take care of... I used to be in the top 0.001% for color detection, now I know I'm very far from it. Especially towards dark and light brightness.
In the early 00's, I used two pro grade NEC flat panel monitors... they weighed a lot... my desk at that time had a permanent bow in the middle. It was around 2008 or so when I'd moved them a few times in a year and a half and decided to switch to flat panels... It became very clear to me around that time, that most people really didn't care about color accuracy in designs. Couldn't tell you how often I'd get "it doesn't look like our printed logo" only to adjust their monitor settings and voiala. Even then.
LCD flat panels are much easier to move around without killing your back. OLED is pretty amazing, but I've got to turn my brighness down a bit to make it tolerable... and I just about have to use dark mode. But there aren't many options in the 45" 3440x1440 display range, which is where I'm most comfortable today.
.0037. IIRC it is possible to get a better score by looking around the screen, your peripheral vision might be somehow more sensitive.
I can see what they mean about .02 though. If I weren’t specifically looking for difference that’s where the colors become less noticeable.
Looking around if you have an LCD also helps compensate for colors shifting off-axis.
0.0042 apparently https://www.keithcirkel.co.uk/whats-my-jnd/?r=AaYkKP___-u-
There's was 2 or 3 where i had no idea, guessed and was a way off.
There's was 1 where i did a hail Mary and got it. It was interesting how some even towards the end were really obvious and others were really subtle - I'd say I did better with purple tones and worst with the blue / greys.
Was fun and kind of meditative locking in like that – I noticed that the anti-glare coating on my screen introduces a visibly larger Δ than the later stages of the game (kind of a dithered "cloud" noise), making it quite a challenge. 0.0021 oneshot.
I'm color blind, and not even a little bit, but I scored 0.0084. I've noticed before that my perception of contrast is slightly better (than that of the people I ever compared it with; admitteldly, that's only a handful, but they weren't colorblind).
What's My JND? 0.0032 Can you beat it? https://www.keithcirkel.co.uk/whats-my-jnd/?r=AUEjKP___831 #WhatsMyJND
I need a better display for sure :)
0.00057 here - https://www.keithcirkel.co.uk/whats-my-jnd/?r=ADonKP_____7
I do work with colors pretty much every day as a UI engineer
Discussed here: https://news.ycombinator.com/item?id=47321188
“Show HN: What's my JND? – a colour guessing game” 54 points | 8 days ago | 62 comments
I got a 0.0035. I'm on a Dell U2724D monitor which is supposed to have decent color accuracy and I cranked up the brightness and contrast to a maximum so I'm sure that helped a somewhat. I also noticed squinting and closing my eyes for a bit sometimes helped when I felt stuck.
"Genuinely remarkable. You sailed past the theoretical human limit like it owed you money. I'd accuse you of cheating but I don't actually know how you'd cheat at this."
0.0032
I'm on a Vivo X300 pro in a dim room, max brightness. Some of these looked impossible but then suddenly I'd see the line.
https://www.keithcirkel.co.uk/whats-my-jnd/ #WhatsMyJND
Same score here on my MBP with an absolutely filthy screen. Reckon I could top the leaderboard if I cleaned it.
Same score and setup. Overhead lights were messing with me a bit as well as the vignetting in the browser. I wanna get sub 0.0030 now
Replying to myself. I also tried this with both my Samsung S25+ phone and LG G5 TV and repeatedly scored in the 0.003-0.005 range on both so it doesn't seem like the display makes that much of a difference for me.
That mostly depends on the quality of your screen.
It depends on something about your screen at least. I first did it on a low quality monitor and it made the line between the two obvious even if I couldn't tell the colors apart. The "hard mode" one was impossible on that screen however.
0.0043, but to be honest, I could probably do better if I changed my monitor's settings. But I have it setup with low brightness for night time lights off viewing that won't wake me up.
0.0021. I find it helps to bob your head around like when you are watching your food in the microwave
Only with chrome devtools :)
0.0021
interesting approach!
This is an amazing deep dive into color difference measurements and how sensitive the math is. The idea that we really need to save characters - bytes - in CSS when we have so many web sites chewing through 49 MB with the enshitification of the web is hard to reconcile.
https://news.ycombinator.com/item?id=47390945
Ahhh, NASA numbers! My favourite, particularly in SVG files, and more recently in colours.
What is a NASA number?
Allegedly, within NASA, there is only a need for so many decimal places. If I can remember correctly, nine digits would get a spacecraft to land within a metre on the rock formerly known as the planet Pluto. So no need for that, unless you are going to 'occupy Pluto', building a few AI datacentres there.
In the context of SVG, usually it is icons that I encounter, where the artworker has exported something like a search icon, which is a circle and a line. These can be specified in SVG using integers, and single digit integers, if you really want, but let's make it two digits.
However, does the SVG file from the artworker have a viewbox containing a circle and a line? Nope. Instead you get one circle for the outer part of the circle in black and another smaller circle in white. Oh, and a line. The circles will be written as polygons with about two hundred vertices, with all vertices specified with NASA numbers (as I call them), typically six decimal places.
As a consequence, the file, which should be six lines of human readable code balloons to many kilobytes of nonsense. Yes, this can be put through SVGO but that will just remove some decimal places and make the file even less human readable.
As a developer, the simple file is great as the inevitable adjustments can be applied easily, maybe to make the icon bold or to adjust alignment within the viewbox. However, when given artworker files with NASA numbers, I then have to raise a ticket so that I can get the corrected file two weeks later from the guy sat in front of a massive Apple monitor with headphones welded on.
The reason for not using NASA numbers has nothing to do with bloat, as no optimisation will make up for the mountain of javascript the marketing guys have bundled into their Google Tag Manager, it has everything to do with efficient workflows.
Generally the customer does not care about fonts, colours and much else that designers fret over. If we went back to the 216 'web safe' colours of yesteryear (for CSS, not images), would anyone notice? If we could not load custom fonts, would most people notice? They might, but this would not prevent them from surfing the web.
lol, the website reminds me of tropes like the professional cleaner whose house is messy, the chef who eats instant noodles at home, or the haut couture fashion designer who only wears jeans and tees. The colour expert whose website is monochrome.
My impression is that they are a compression expert, not a color expert. Make sense they chose uniform flat colors :D
"The cobbler's children have no shoes."
Maybe he understands the field so much that he prefers to exercise it minimally in his hobby. Or maybe he just can't decide. It also makes perfect sense for a study in colors to be against a neutral background.
Am I pretty?? (story)