13 ms·

Web color is still broken

643 points by Aissen 5y ago

lisper 5y ago
TBH, the "correct color mixing" and the "your browser" color gradients look indisistnguishable to me.
blenderdt 5y ago
Web color is still using linear color space. There is nothing wrong with this because now the browser can decide how to convert it. So the title should be: browsers still use linear color space.
- vanderZwan 5y ago
  They use sRGB color space. If it used linear color space it wouldn't have this issue.
  - nness 5y ago
    I assumed the interpolation of gradients isn't a matter for the colorspace?
    - gmueckl 5y ago
      The problem is the non-linear conversion between sRGB values and actual displayed brightness. Some operations have physical equivalents (e.g. transparent overlays can be defined equivalently to viewing a background through colored glass). If they do and you use textbook physical models to implement them, you need to also use linear intensity values to get it right. A lot of code out there ignores this.
    - vanderZwan 5y ago
      Does it becomes obvious that it is a problem when I point out that using sRGB color space means we do linear interpolation of values in a non-linear space?
hummusandsushi 5y ago
It would be nice to have explanations and comparisons of the techniques that are employed for the current behavior and the new behavior. The color gradient criticism feels valid from an aesthetic standpoint but the problem seems to be that a simple linear interpolation doesn't provide the desired color properties. This raises the question as to what exactly are the desired color properties from a technical standpoint and when is each technique applicable. Say we changed all color interpolations from an interpolation in RGB space to HSV space (as I imagine the color gradients suggested are achieved), would this have any unforeseen consequences?
- thrdbndndn 5y ago
  It's not RGB that is "broken", it's the typical RGB color space used in practice, sRGB and similar, is "broken": because they are not in linear space. The value of your nominal R,G,B number is the result of using the original "intensity" (brightness or similar) and then raise it to the power of gamma (typically 1/2.2). The purpose of this is to give more "bits" around lower end (darker end) where human eyes are more sensitive [1]. If we don't do gamma and have relatively low bit depth (like your typical 8-bit), it's very easy to produce banding at dark gradient areas. Up to this point, there is nothing wrong. However, if you want to average two colors (which affects almost all the operations that can happen on bitmap images, including gradient, blending, resizing, blurring, etc...), the correct way, just like real-world physics, is to average them in original linear form/value; but most of applications/implementations, as shown in this page, are just averaging their nominal "gamma'd" values. [1] There is often a common belief to say that the introducing of gamma space historically was because of how CRT screen used to work (the relationship between electricity intensity and brightness etc.). But most of in-depth articles about this topic say that's just a coincidence.
  - hummusandsushi 5y ago
    Wow, yeah. I have done some hobby work with digital colors and rendering and I had no idea how used to the visual artifacts from math done on sRGB values directly I was that I just assumed a "fancy" transformation. Thanks for the insight.
fsloth 5y ago
The gradient mixing example is broken. "Color gradients are supposed to be equally bright around the midpoint" This is false. Nobody mandates this. There is no "correct" way to do it, every one of them is arbitrary (although some do look better than others and the suggested method is better than the default linear interpolation). It is completely analogous to smoothing curve in animation - it's about what sort of interpolation mechanism you use. If there would be a standard for specific perceptually pleasing gradient, then one could claim "does not follow standard X". The point of the article is usually abslutely correct, though: "The correct way to process sRGB data is to convert it to linear RGB values first, then process it, then convert it back to sRGB if required."
- barbegal 5y ago
  Whilst it is true there is no "correct" gradient, the author is making the reasonable assumption that the gradient can be simulated by two linear light sources (A and B) being shone onto a perfectly reflective (white) surface. Each light at full brightness is one end of the gradient. To calculate a colour at x% along the gradient you turn light A on to (100-x)% and B on at x%. The issue with this is that the human eye perceives brightness slightly differently at different frequencies (and combinations of frequencies) so the perceived brightness of the gradient may appear non linear. That isn't to say that the browser generated gradient is perceived in this way, it is generally even more non linear in its perceived brightness.
  - fsloth 5y ago
    Gradients are design tools. The gradient interpolation function can be designed around some physical mixing hypothesis but there is no first principles rule as such. Focusing on the luminosity is only half of the battle. For nice looking gradients that are pleasing to design with, generally for aesthetic reasons you also want the perceived color saturation to be interpolated in a predictable way. For reference, here is a nice example of an approach to find a nice looking mixing function: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
  - barbegal 5y ago
elevanation 5y ago
I don't see a clear "why" for fixing this explained in the post. Yet if we assume this should be fixed, how should the community fix this? Has this been discussed at the appropriate standards bodies and conferences?
- popcorncowboy 5y ago
  Yep. Because this is a perfect example of something that only matters in ivory towers, but not "on the street". The fact that it HAS been 20 years and browsers "haven't bothered" to "fix" this only goes to show how unimportant this really is. The author is not wrong about any of it, but that only strengthens the argument that there isn't a compelling "why" for "fixing" it (let alone that changing how browsers render outputs really WOULD break every site on the internet that is designed for how sRGB has worked in browsers for 25+ years).
  - Silhouette 5y ago
    The fact that it HAS been 20 years and browsers "haven't bothered" to "fix" this only goes to show how unimportant this really is. I couldn't disagree more. Browsers and modern web development style keep kicking out tried and tested technologies in favour of newer alternatives that are objectively inferior. This is not a good thing if you're interested in an attractive, functional WWW. In this case we stopped using real images prepared by real graphic designers and digital artists using real graphics software and we substituted rounded corners and gradients and web fonts and scalable line art graphics. You can argue about whether this has advantages by reducing data sizes or cutting costs through allowing developers with bland toolkits based on "flat design" to do styling work instead of hiring experts. What you can't seriously dispute is that those new techniques render really badly in some or all of the major browsers and now many sites look bad unnecessarily and some become harder to use as well.
    - rnvannatta 5y ago
      I guess color theory hasn't been given much love in web development because it's hard and murky. Once you do a dive into it, you realize there's no correct answers, only tradeoffs. It's a lot harder to be zealous about some color model being the ultimate color model because you'll encounter reality soon enough. I suppose the original author is a zealot for linear SRGB, but that might change once he encounters a black and white gradient interpolated in linear.
avereveard 5y ago
It would be helpful to have the expected result near the browser output. anyway, I think the "correct" scaling is at the very least objectionable. from a numeric point of view, it whould mix in gray, but from a visual poin of view we do preceive the outer box as darker because non linearity in dislpay and perception.
- formerly_proven 5y ago
  > anyway, I think the "correct" scaling is at the very least objectionable. from a numeric point of view, it whould mix in gray, but from a visual poin of view we do preceive the outer box as darker because non linearity in dislpay and perception. I can barely perceive a brightness difference between the two areas. Meanwhile, scaling the gamma-encoded image results in a severely wrong result where the outside is far darker than the inside.
- penteract 5y ago
  I noticed some extreme weirdness with the "correct scaling" example. For me (Firefox on Linux using LCD displays) , it looks different depending on which monitor I'm using - on one, the outer part of the gray square looks like there are yellow dots, while on the other monitor, it flickers, but only while the image is over a particular place on the physical monitor (this happens with other images where adjacent pixels frequently have a large difference in color). Also, the apparent color changes depending on the zoom level - at anything other than 100% zoom, the effects described above disappear and the outer square appears darker than the inner one (although not uniformly). This may be linked to the bug that causes the browser to scale the image incorrectly.
  - formerly_proven 5y ago
    > on one, the outer part of the gray square looks like there are yellow dots, while on the other monitor, it flickers, but only while the image is over a particular place on the physical monitor (this happens with other images where adjacent pixels frequently have a large difference in color). Your monitor likely has a 6-bit panel and uses FRC to emulate an 8-bit display. This tends to cause content-dependent flickering and other temporal artifacts.
barbegal 5y ago
It is quite astonishing that color is still this broken even in most applications designed to work with colored images. Are there any good software libraries that can be leveraged to prevent this? And I agree with the author about his reasoning that sRGB is compressed data. An audio equivalent is the Mel scale https://en.wikipedia.org/wiki/Mel_scale https://en.wikipedia.org/wiki/Mel_scale
- thrdbndndn 5y ago
  Or the good ol' pre-emphasis [1]. They were not really common in the Western (maybe more so in vinyls, but I don't collect that) but it's such a pain in ass when I was collecting Japanese CDs from 80's. https://wiki.hydrogenaud.io/index.php?title=Pre-emphasis https://wiki.hydrogenaud.io/index.php?title=Pre-emphasis
  - Zardoz84 5y ago
    All HiFi vinyls and cassettes are/was recorded using pre-emphasis and required a de-emphasis filters to reproduce correctly the sound.
- rnvannatta 5y ago
  It's not astonishing to me, because I believe the author is not entirely correct about color being broken. sRGB color is not the perfect color space, but in general it's better for UI than using linear color, which the author seems to be advocating for. The web is primarily UI. Not only that, but sRGB is the color space of probably 95% or more of devices, and of all low end computer monitors. sRGB is designed to balance perceptual linearity with encoding cost. It's very cheap to encode, and perceptual-enough that you can store a channel in 8 bits with high quality (linear value needs 16 bits to be comparable, and it's still worse unless you use half floats instead of unorm. It's common to go as low as 5 bit sRGB channels for albedo in computer graphcis.) I am a graphics engineer, I've had a lot of colleagues learn the aphorism "don't do math in linear" once they get first burned. > Unfortunately, by calling it a "color space", we've misled the vast majority of developers into believing that you can do math on sRGB colors That belief is an over-correction in my opinion. The examples that the author shows are all about achieving physically correct lighting. The Rubik's cube image blended with 25% white doesn't look physically plausible because it's not being done in linear color. But the goal with UI is visibility, not physical plausibility. If you want to cover something with a UI element at 50% transparency, you want 50% of the UI and 50% of the background, not a physical model of some transparent medium. sRGB does however suck for defining gradients, but I think that's more to do with it being RGB. For this what I generally advocate is a luma/chroma model. Other posters have mentioned Oklab which is great, though even plain YCbCr will get you 80% of the way there while being cheap to convert to. You still want to do that in gamma/perceptual space though, not linear. The author didn't show gradients between white and black. Gradients between colors of 2 different luminances look awful in linear^. However I totally agree with the author on zoom. Web browsers should be doing zoom/image resampling in linear space. Images shouldn't qualitatively change based on their zoom level. ^ https://external-preview.redd.it/voeyOYu6Ds-fLLU7nR4kABmFgUEAkeibipER9YbbdX0.png?auto=webp&s=fab9cfe923659e1754c73a103138ce874f4c2510 https://external-preview.redd.it/voeyOYu6Ds-fLLU7nR4kABmFgUE...
5350-uiop-1130 5y ago
i would not say it was "broken". maybe just not implemented correctly.
- barbegal 5y ago
  Here's a real world image I found on the internet which is broken, both the left and right side of this image should have the same brightness (50%) but at the default browser scaling it appears that they have different brightness which is wrong and thus broken. https://www.redsharknews.com/hs-fs/hubfs/Imported_Blog_Media/Two_superimposed_checkerboard_patterns_also_create_moire_patterns_1-1.png https://www.redsharknews.com/hs-fs/hubfs/Imported_Blog_Media...
naoqj 5y ago
The fewer power we give to designers, the better for us. A website is an interface, not your own personal fiefdom to grow your portfolio.
- mawadev 5y ago
  A website is an interface to display ads while you pad content around them.
- tpush 5y ago
  How does your comment have anything to do with this post?
- ChrisRR 5y ago
  less power, fewer powers
jbverschoor 5y ago
Well, the gradient is specified as an RGB gradient, yet the post talks about brightness. That's not the right comparison. There are different color models, and a gradient will simply interpolate between the values. A better example would be to use HSL or LAB for the gradients (Red->Green): background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(120, 100%, 50%)); background: linear-gradient(to right, lab(50% 128 128), lab(50% -128 128)); background: linear-gradient(to right, lab(50% 128 128), lab(100% -128 128)); The two different LAB values for "green" show that if you're just changing Lightness, you'll get a darker share of green. The RGB green needs 100% Lightness. HSL produces the same output as an RGB gradient, which is wrong, as only L should be modified. LAB works only in safari, and although the result is slightly different, it's still incorrect, probably due to my conversion
- danbruc 5y ago
  I don't think this is the best approach. There are two independent things in a gradient - the colors to interpolate between and the interpolation path - and I would not tie them together. If I specify the same colors just using different color models, then I still want the same gradient unless I explicitly demand different interpolation paths. You would not want that interpolating between 0 and 42 yields a different result than interpolating between 0x00 and 0x2A, would you? My ad hoc expectation would be that I get a linear interpolation of perceived brightness, saturation, and color independent of how I specified the color to interpolate. Or maybe even better a path of minimal perceived color difference with uniform perceived color difference along the path which is probably at least slightly different from interpolating brightness, saturation, and color independently.
  - jbverschoor 5y ago
    Values in different colorspaces are not fully interchangeable. Some values don’t exist. Some might have multiple values in another space
    - danbruc 5y ago
      That doesn't really matter, you don't really need to convert between different color spaces that much. Whatever the user specifies you convert into one color space, say CIE XYZ or whatever suits the interpolation you want to perform, and then you convert the interpolation result into whatever you need as the output color space. The only real requirement is that the interpolation space covers all input spaces, then it does not matter that not all input spaces cover the same colors or have non-unique representations.
notorandit 5y ago
Well, no browser has correctly implemented tables since ever, why should they bother about colors?
- ainar-g 5y ago
  This is the first time I ever hear about it, to be honest. Is there a link to something like OP but for tables?
illys 5y ago
Keeping aside the browser issue (which is already a quite interesting issue)... The correct scaling double square is already an issue with my eyes: Mixing black and white dots to produce a grey was a pretty common trick when we did not have enough colors in our computers decades ago. But when I step back to lose the perception of the texture, why do I still see a very different grey than the center-grey with the same overall brightness? I can't even say which one is brighter/darker (my answer changes when I look with a different mindset).
- planede 5y ago
  Many displays are not calibrated well to do that test justice. Also if you have a high DPI display, then the browser could already scale that picture for you, screwing with the test. You should display those images with image pixels matching device pixels. You can visually test your display calibration with [1], but you should ensure that the image is displayed 1:1, which might not be the case with your browser and hiDPI settings. [1] http://www.lagom.nl/lcd-test/gamma_calibration.php#gamma-test-2.png http://www.lagom.nl/lcd-test/gamma_calibration.php#gamma-tes...
  - dr_zoidberg 5y ago
    Chiming in for HiDPI displays, I have a global 125% scale, so I had to zoom out the browser to 80% to get 1:1 on the rendered images.
tomduncalf 5y ago
Colour is definitely a complex thing. My friend who is a graphic designer prefers to use Firefox over Chrome on MacOS because it renders “nicer” colours - being somewhat colourblind, I had never noticed, but indeed there is a subtle difference between how the same hex colour code renders in both, according to DigitalColorMeter…
- usrn 5y ago
  Maybe it's because I'm on Firefox that all these images look identical. I have no idea what the author is talking about. EDIT: nevermind, I see it now. The square in the last few images is slightly green when CSS is scaling it.
- infensus 5y ago
  I have close to zero knowledge about this, but I believe it may be because of different default color profiles? On Linux, when I force Chrome to use sRGB (chrome://flags/#force-color-profile) it makes the colors identical to Firefox's. It doesn't seem to make a difference on MacOS though, the colors are always identical there
fxtentacle 5y ago
... and this is why I prefer desktop apps like Lightroom Classic CC over their web-based equivalents. This and broken shortcut keys, e.g. Ctrl+R shell reverse search in a web IDE.
mtklein 5y ago
Having worked on this in Skia (and so Chrome, Android) for a good while, I can vouch this is an issue browser/phone developers would have liked to fix a long time ago, but have kept by default for compatibility with old expectations. A lot (~all) of web/app design was and still is done with this broken interpolation in mind, which then all breaks when math is done in a way that more accurately models light. It’s a bit of a chicken and egg problem that we can really only fix by allowing content to explicitly opt-in to linear working color profiles. And sadly that’s not going to solve everything either: while a linear profile is good for color interpolation, sRGB encoding is ideal for brightness interpolation. You’re stuck choosing between ugly red-green interpolation and nice white-black (sRGB) or between nice red-green and ugly white-black (linear). There are some more complex color spaces that do try to be the best of everything here, but I’m not aware of any browser or OS providing support for working with these perceptual color spaces. A similar problem comes up when trying to manage color gamut on screens and systems that are intentionally blown out to look vivid, vibrant, shiny… looking at you Samsung phones. Any properly color-managed image there looks incredibly dull compared to the bright defaults you’ve grown accustomed to. If we take 0xff red to mean “full sRGB red”, that’s much less bright these days than if we just assume it means “as red as the screen will go.” It’s much like how TVs are (hopefully were?) set in the store in bright shiny mode to induce you to buy them, not set to reproduce colors accurately.
- orlp 5y ago
  In what way is linear black-white interpolation ugly?
  - edflsafoiewq 5y ago
    https://i.imgur.com/CRq6Kn8.png https://i.imgur.com/CRq6Kn8.png (left: linear, right: sRGB) In linear interpolation, there's too much white and not enough black. That's why gamma correction/sRGB exists after all: if you encode the linear value directly, you waste most of the space on white values you can barely tell apart.
    - orlp 5y ago
tiborsaas 5y ago
It's a bit sad that the author went to the depths of buying this domain, create this page and then don't provide a correct library they think it's appropriate like https://colorjs.io/ https://colorjs.io/ There's an article with a much more sympathetic approach: https://www.joshwcomeau.com/css/make-beautiful-gradients/ https://www.joshwcomeau.com/css/make-beautiful-gradients/ Not sure if this is trolling or not, but the closing HTML tag misses a > :)
- DrewADesign 5y ago
  > It's a bit sad that the author went to the depths of buying this domain, create this page and then don't provide a correct library they think it's appropriate like https://colorjs.io/ https://colorjs.io/ Colorjs.io doesn't address most problems the website highlights.
  - tiborsaas 5y ago
    That's why I would have appreciated a suggestion that does. There are 3 issues highlighted: color mixing, transparency and scaling. The second is entirely subjective and I prefer what browsers do. Scaling is irrelevant (the issue is not explained) to color handling.
    - DrewADesign 5y ago
      The author is talking about the way browsers render graphics. Unfortunately, there's no way to correct that without modifying the browser itself.
      - tiborsaas 5y ago
        And when there's no way, you use libraries. Others also mentioned CSS4 solutions and other alternatives. It's really not that bad as the articles paints it (pun intended).
        DrewADesign 5y ago
jeroenhd 5y ago
Web color isn't broken, it's specced weirdly. Any attempt at "fixing" this would miscolor every existing website for the sake of correctness. The SVG color space definition is the exception here, browsers can do better in that area. Still, it's silly to expect browsers to change the way their color system works and go against the expectations of color blending for web developers just to tick a correctness box. Make a time machine and take it up with Microsoft en Mozilla in the early 2000s if you want the default color system to work differently. Write a patch for Chrome/Firefox/WebKit to implement the SVG spec if you're so passionate about this. People generally don't care about this stuff, they want the result to look Good Enough™ and that's exactly what the current implementation does. I don't think any browser maker will put in the effort to do much about this "problem".
jiggawatts 5y ago
Not just the web: PC colour is totally and utterly broken. The web is just a small part of this. There's an entire field of colour management that Microsoft, Linux, and Google are carefully ignoring. They'll occasionally stumble upon ICC colour spaces, HDR, or 10-bit, but they make sure to break everything even worse and leave it like that forever. Sigh... I have gone on the same rant annually since about 2010, starting on Slashdot. Most recently on YCombinator News in 2021. It's a whole new year, time to repeat my rant and pray to the IT gods that someone at Microsoft or Google stumbles upon this: The current year is 2022. The future. We have these amazing display technologies such as OLED, HDR, and quantum dots. In this sci-fi fantasy world I cannot do any of the following: - Send a photo in any format better than an SDR sRGB JPEG in the general case, such as an email attachment, document, or chat message. These are 30 year old standards, by the way. - Send a photo in any format and expect colour reproduction to be even vaguely correct. Wide-gamut is especially pointless. It is near certain that the colours will be stretched to the monitor gamut in an unmanaged way. People will look either like clowns or zombies depending on the remote display device, operating system, software, and settings. - Send a photo in 10-bit and expect an improvement in image quality when displayed. - Expect any industry-wide take-up of any new image encoding format. It is a certainty that each vendor will do their "own thing", refuse to even acknowledge the existence of their competitors, and guarantee that whatever they come up with will be relegated to the dustbin of history. Remind me... can ANY software written by Microsoft or Google save a HEIF/HEIC file? No... because it's an "Apple" format. Even most Microsoft software can't read or write their own JPEG-XR format, let alone Google or Apple. Netflix developed AVIF but I'm yet to see it taken up by any mainstream system. Etc... New in 2022: - Display HDR on Linux. - Display HDR even vaguely correctly on Windows. I mean, good try, but simply clipping highlights without even attempting to implement tone mapping is just plain wrong. - Use a colour calibrator device on Windows 11, which totally broke this functionality. - Use a colour calibrator device for calibrating a HDR display. I have a device that can measure up to 2000 nits. Can I use this calibrate my HDR OLED laptop display? No. That's not an option. - Turn on HDR in Windows 11 and not have it cause a downside such as restricting the display gamut to sRGB. - Use HDR in any desktop application for GUI controls. - Use colour management for any desktop application for GUI controls that isn't an Electron application -- the only platform that does this vaguely correctly under Windows by default. Things have even regressed over the last few years! Windows 10 Photo viewer could do colour management -- badly. It would show an unmanaged picture at first, and then overwrite it with the colour managed picture a bit later, so you get colour flickering as you scroll through your photos. Okay, fine, at least it was trying. Windows 11 does not try. It just assumes 8-bit sRGB for everything. Similarly, the 14 year old WPF framework supported wide gamut, 16-bit linear compositing, and HDR. The "latest & greatest" Win UI 3 framework... 8-bit SDR sRGB only.
BlueTemplar 5y ago
> Unfortunately, by calling it a "color space", we've misled the vast majority of developers into believing that you can do math on sRGB colors, and by exposing the raw sRGB numbers to users, we've misled them into thinking those numbers have a reasonable meaning. But sRGB spec does specify a color space ! And these numbers do have a meaning - the unreasonableness is with people's assumptions. The issue here seems to be rather that developers and users, when hearing "space", assume a linear, Euclidean space, except color spaces are usually none of these ! But I don't really see what other word could be used here instead of "space" ? ---- A related issue (and potentially a fix) : In 2015 developers (and users) could (usually) just stay blissfully ignorant of colorimetry and assume sRGB everywhere. Today, with wider gamut screens becoming common even in non-professional monitors ("HDR"), and non-Apple OSes starting to get proper support for non-sRGB specs, sRGB cannot be assumed everywhere. So learning some colorimetry might be a pre-requisite for comptetence now. (Except for Web text colors, IIRC they're still limited to 8 bit per color = 256 values, sRGB ?)
metalliqaz 5y ago
This is one of those things that seems extremely picky to me and at the same time I'm glad that someone out there cares enough about it to fix it.
antattack 5y ago
I would imagine it actually looks even worse since low-mid tier laptops can only display 60% sRGB.
- toastal 5y ago
  Even claimed 100% sRGB isn't the whole 100%. I'm aghast at how only recently 100% P3 coverage is finally becoming normal at the high-end (and is still uncommon for gaming-class laptop displays). I can't even consider System76 or Framework or similar for this reason. If you edit any visual content or work with designers, you owe it to yourself to get a P3 display that is calibrated.
ricardobeat 5y ago
I don’t understand the “correct scaling” part. The outer ring of the square has a mix of gray and darker pixels, it cannot possibly be as bright on average as the center square which is all grey pixels?
- jeroen 5y ago
  It looks like it is supposed to be a centre of 50% grey and a ring of alternating white and black pixels. As the note says: if you're seeing a darker ring (alternating black and grey pixels) your browser is messing up.
iruoy 5y ago
I just found out that `lch()`, `lab()`, `oklch()` and `oklab()` are already supported in Safari (stable)[1]. The normal versions have a white point of 50 and the ok versions have a white point of 65, which is the same as sRGB[2]. [1]: https://wpt.fyi/results/css/css-color?label=stable&label=master&product=chrome&product=firefox&product=safari&q=label%3Ainterop-2022-color https://wpt.fyi/results/css/css-color?label=stable&label=mas... [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
npigrounet 5y ago
oxplot 5y ago
Very interesting aspect of color management which I never paid attention to. I wrote a simple primer on color profiles [1] a while back which makes mention of state of custom color profiles on the web. I do wonder what result you'd get if you blended images with different color profiles on a web page as browsers can view non sRGB based image content. [1]: https://blog.oxplot.com/understanding-color-management/ https://blog.oxplot.com/understanding-color-management/
usrbinbash 5y ago
As someone who has little to no idea how colors and operations on them work, I must say that was an incredibly interesting read!
enriquto 5y ago
> The image should retain the same overall brightness as it is scaled down. Incorrect. While large regions of homogeneous color should indeed retain their brightness, thin one-dimensional structures are supposed to become darker and disappear gradually as the image is scaled down.
- gjm11 5y ago
  "Supposed to" in what context, by whom?
  - enriquto 5y ago
    In any context, by everybody. This is what happens when you move far away from an object, which is what "zoom-out" or "downscale" is all about. The total amount of light that you receive from an object decreases with the square of the distance.
    - planede 5y ago
      Yes, but if you scale to half size (in linear size), then the overall luminance could go down by 1/2*1/2=1/4, not more, not less.
    - formerly_proven 5y ago
      According to this logic scaling an image down would make it darker.
      - enriquto 5y ago
        It does. Imagine a one pixel wide vertical white line on black background. As you downscale it, by whatever reasonable means, the line becomes a darker and darker grey. EDIT: This is in the context of the image shown in the article, which is a gradient image consisting in light lines over black background. Of course, if you have thin black lines on white background, they will become ligter upon downscaling. In practice, on a real image, some parts will become darker and others lighter, depending on their particular textures.
makerofthings 5y ago
The “correct” colour mixing example looks a little better, but only a little bit. The others, I don’t see a problem(I have m1 MBP, Firefox). I don’t think any of this would really affect my browsing experience one way or the other…
jstanley 5y ago
The worst part about web colour is that it's not even consistent. If you draw a PNG containing a rectangle with a given colour on to a page with background colour of the exact same RGB values, then it can look different. Here's an example: https://incoherency.co.uk/interest/colour.html https://incoherency.co.uk/interest/colour.html And here's a screenshot of how it looks on my browser (Firefox 99.0, Ubuntu 20.04 LTS): https://img.incoherency.co.uk/3812 https://img.incoherency.co.uk/3812 The square is a different colour to the page background colour despite having the same RGB value (#0cf4c7) but they look different. No amount of changing the colour mode selection in GIMP can fix this. I opened the screenshot in GIMP and used the colour picker tool to see what colour my #0cf4c7 has turned into, and in the screenshot image it is #67f1c7. Strangely, when I draw the screenshot in the browser, its colours stay the same, so obviously there is something you can do to the PNG that will make it render the colours you chose.
- electroly 5y ago
  I don't see the square, FWIW. The colors are a match in Edge v100.
  - jstanley 5y ago
    Interesting. It might just be a Firefox thing. I remember reading a Firefox bug report about this, and the response was that the person's monitor colour calibration must be wrong, which makes no sense to me since even if the monitor colour calibration was wrong, I'd except it to apply to both the page and the image equally. EDIT: This one: https://bugzilla.mozilla.org/show_bug.cgi?id=621474 https://bugzilla.mozilla.org/show_bug.cgi?id=621474 - from 12 years ago.
    - alpaca128 5y ago
      Firefox 99.0 (Linux) here, the square is invisible.
    - infensus 5y ago
      On Linux, I can see the square in Firefox, but not in Chrome. Interestingly enough, the color in Chrome is identical to the color of the square in Firefox, but when I force sRGB in Chrome (chrome://flags/#force-color-profile), it becomes identical to the background color in Firefox. I don't know what to make of that
Eric_WVGG 5y ago
Web color is somehow still a garbage fire. About a decade ago I was hearing that web-safe color was effectively obsolete. Today Firefox chokes on P3 color, and Chrome doesn't appear to care at all about display color profiles. I recently launched a website that had a fire-engine red background and was expected to have a rotating animation above the fold (https://worldparkinsonsday.com https://worldparkinsonsday.com). Even once we got the animation synced perfectly between Chrome and Safari, it turned out that iOS Safari was rendering the video differently. Eventually I gave up and replaced a 128kb mp4 video with a 5mb transparent animated GIF. Shameful. And I had this lil' fellah on my desk smiling at me the whole time https://100soft.shop/collections/dumpster-fire/products/dumpster-fire-vinyl-figure https://100soft.shop/collections/dumpster-fire/products/dump...
- wbobeirne 5y ago
  A transparent webm probably would have worked for your use case. Or if you were willing to rebuild the animation, it looks simple enough for SVG.
  - ekkeke 5y ago
    Unfortunately, I don't think iOS safari has webm support yet.
    - postalrat 5y ago
      Will it break the page if this support is missing?
    - Wevah 5y ago
      HEVC video with transparency is apparently possible[1], though I’m not sure if it’s supported on non-Apple platforms. [1]: https://developer.apple.com/videos/play/wwdc2019/506/ https://developer.apple.com/videos/play/wwdc2019/506/
      - woojoo666 5y ago
        I really hope Apple doesn't use this as an excuse not to support WebM, which is a web standard
kaichanvong 5y ago
the change of HSV from RGB have to say, confusing in-all the online chatter and talk here is at B&W into RGB for colour/color "taste", individual optical focus and further more, its goes beyond chat, news and should be studied. avoid this kind of flaming pit of fun gaming and consult with the person (know and trust). Opticians are great for this in my experience. They actually should point out to you the truth.
cout 5y ago
Something I've been curious about for a long time: I grew up using an IBM 8513 VGA monitor connected to a PS/2. That's the mental model I use when thinking about color; to my brain, the default grey color (value 7) is "right in the middle" between what I think of as black and white. What modern colorspace most closely maps to the color space I grew up with?
- 323 5y ago
  You can hardly call IBM 8513 VGA as having a color space. It just has colors - meaning the color space it's kind of arbitrary, two different monitor models could have different primary colors (as in slightly different reds/blues/greens).
jrd79 5y ago
The (s)RGB color model is not some legacy choice. It is closely tied to how colors are stored, composited, and communicated to physical displays. And this problem seems a bit artificial - how often do you see a linear gradient between colors like the ones shown in the examples? Finally, it is also trivially easy to get a gradient that looks like the "correct" ones presented in this article, by just adding a few additional color stops along the way that are closer to where you want the intermediate values to be.
Conlectus 5y ago
This is a bit out out of date. Interpolation colorspace can be specified as of CSS Color Module Level 4. See https://drafts.csswg.org/css-color-4/#interpolation-space https://drafts.csswg.org/css-color-4/#interpolation-space I don't believe it is yet implemented in browsers, but I know Chrome at least is working on it.
Ruuttu 5y ago
est 5y ago
The best color mixing I've seen in a while is this https://github.com/scrtwpns/pigment-mixing https://github.com/scrtwpns/pigment-mixing
wolfofcrypto 5y ago
peanut_worm 5y ago
I doubt its ever going to change for compatibility reasons
jupp0r 5y ago
Can/is there a CSS library that does the transformations from an arbitrary color space to sRGB for you? Would it make sense to enhance CSS to an extent where this is possible?
efitz 5y ago
While I sympathize with people for whom this matters, I still find it weird that other people care/are concerned about/want to control my experience. I don’t want you to control my experience: Maybe I like having weird colors; maybe I’m color blind and need alternative colors; maybe I don’t want color at all and want a web experience that is text centric. The model of the web is backwards and it makes browsers ridiculously over-complicated because they’re software designed to tel other people control my experience navigating and consuming information. Give me the information and keep your colors and layout and scripts and ads and …
- Veen 5y ago
  Unless you are the one implementing color rendering in web browsers, someone else is controlling your experience of color on the web.
  - efitz 5y ago
    I can select a web browser that displays colors how I’d prefer, just as I select a monitor. The problem is that the web as currently constituted allows (encourages) the web page author to dictate my experience and my browser will mostly obey. I’d prefer that there be no such thing as “pages”, just “information”, and that all display decisions would be made by software I completely control.
bee_rider 5y ago
Designs which depend on a particular colorspace are bad anyway. I used the proper black background/white text override in my settings for a while, it was a great improvement on the sites where it worked. But it broke too many sites. Not really sure how we've managed to regress so far on the ideal of having webpages just provide content and letting the browser render it as appropriate. Oh well, readerview it is I guess.
robbrown451 5y ago
Probably the best way to test if you are doing it right is to compare to an optical blend. Say you blend red and green, such as by having a red ( rgb(255,0,0) ) div, and putting a div that is green with 50% transparency over it ( rgba(0,255,0,.5) ). Now, make a checkerboard pattern of red and green divs. Look at it from far away enough that it appears as a solid color. (easier if you make each div occupy one pixel, while trying to avoid any antialiasing) You could also use something like frosted glass to blur it. Do they appear the same color? I would not expect it to appear as a bright yellow, but a rather dark yellow. (but not so dark as it appears brown)
wunderlust 5y ago
Maybe we could instead say, "web color is still not perfect". Nature is a wild animal and even getting computers to simulate natural color at all is a feat. Want to see real color? Get out of the fucking building.
rawoke083600 5y ago
Man this is another good example of the quote: "Never underestimate the value of a 'good-enough' solution" I commenting as a multi-decade programmer, but alas I know nothing about color ! Even though I've dabbled in graphics here and there in my career. (this is just for background) My main point is that, as "technical person" with NO skin in the game. I can honestly say I can't see the difference, or if I can, why one is better or not. Not saying it should not be fixed, but if I am a sample of the "ignorant majority" that don't know about colors should this bother me ? Or bother me more ? I hope I'm not offending the "experts in this field" just saying, your clueless audience(me) don't even know what is wrong :)
- jve 5y ago
  I'm a casual developer too, not knowing much about colors. But I can see the difference. For "my browser" visual image, I can kind of see "vertical pillars" in the middle which which reminds me of times where we had not many colors in our palette. Moreover, if looking at red and moving on horizontal axis - it is same red and after only some distance it starts to change. The correct color mixing for me looks better - the colors start to change instantly and more smoothly.
blueflow 5y ago
Can someone explain this for a sight-impaired person?
- kps 5y ago
  Consider someone playing a trombone, doing a slide between a low note and a high note at the same volume. With web color it gets quieter in the middle.
blacklight 5y ago
This goes back to the original sin of using RGB/sRGB to express natural colors. Nature doesn't work in terms of how much red, green and blue it needs to mix on the canvas. Sure, it's great and intuitive to represent colors on digital systems, but that's it. Light in nature works in terms of hue/tint along a continuous spectrum, brightness and saturation. Color spaces such as HSV/HSL model these concepts much better than any RGB algorithm, and doing math with them produces results that actually make mathematical sense. YUV also takes human color perception into account. It's not a coincidence that most of the smart lights usually use HSV/HSL color spaces, and most of the cameras opt for YUV* based color spaces.
krick 5y ago
Gradients in a better colorspace indeed make more sense to me (all of HSL/HSV/Lab are way more useful for practical applications than what sRGB does), same as HSL palettes in tools like Photoshop, but this transparency example I don't understand. Admittedly, I never gave it much of thought, but all these "my browser" examples look MUCH better and more intuitive to me, than the "correct" case. Well, I don't know, maybe 25% opacity should look a little bit more potent, but these "my browser" examples are actually usable, they look good, even though I agree they should all look the same (they don't for me). But each one of them looks better to me, than the "correct" example, which simply cannot be used to shade a picture. It doesn't look like a glass. It's ugly.
joshwcomeau 5y ago
I wrote a blog post all about this! And how to get better color-mixing in your CSS gradients. Shameless plug: https://www.joshwcomeau.com/css/make-beautiful-gradients/ https://www.joshwcomeau.com/css/make-beautiful-gradients/

643 points by Aissen 5y ago

TBH, the "correct color mixing" and the "your browser" color gradients look indisistnguishable to me.

Web color is still using linear color space. There is nothing wrong with this because now the browser can decide how to convert it. So the title should be: browsers still use linear color space.

vanderZwan 5y ago
They use sRGB color space. If it used linear color space it wouldn't have this issue.
- nness 5y ago
  I assumed the interpolation of gradients isn't a matter for the colorspace?
  - gmueckl 5y ago
    The problem is the non-linear conversion between sRGB values and actual displayed brightness. Some operations have physical equivalents (e.g. transparent overlays can be defined equivalently to viewing a background through colored glass). If they do and you use textbook physical models to implement them, you need to also use linear intensity values to get it right. A lot of code out there ignores this.
  - vanderZwan 5y ago
    Does it becomes obvious that it is a problem when I point out that using sRGB color space means we do linear interpolation of values in a non-linear space?

hummusandsushi 5y ago

It would be nice to have explanations and comparisons of the techniques that are employed for the current behavior and the new behavior. The color gradient criticism feels valid from an aesthetic standpoint but the problem seems to be that a simple linear interpolation doesn't provide the desired color properties. This raises the question as to what exactly are the desired color properties from a technical standpoint and when is each technique applicable. Say we changed all color interpolations from an interpolation in RGB space to HSV space (as I imagine the color gradients suggested are achieved), would this have any unforeseen consequences?

thrdbndndn 5y ago
It's not RGB that is "broken", it's the typical RGB color space used in practice, sRGB and similar, is "broken": because they are not in linear space. The value of your nominal R,G,B number is the result of using the original "intensity" (brightness or similar) and then raise it to the power of gamma (typically 1/2.2). The purpose of this is to give more "bits" around lower end (darker end) where human eyes are more sensitive [1]. If we don't do gamma and have relatively low bit depth (like your typical 8-bit), it's very easy to produce banding at dark gradient areas. Up to this point, there is nothing wrong. However, if you want to average two colors (which affects almost all the operations that can happen on bitmap images, including gradient, blending, resizing, blurring, etc...), the correct way, just like real-world physics, is to average them in original linear form/value; but most of applications/implementations, as shown in this page, are just averaging their nominal "gamma'd" values. [1] There is often a common belief to say that the introducing of gamma space historically was because of how CRT screen used to work (the relationship between electricity intensity and brightness etc.). But most of in-depth articles about this topic say that's just a coincidence.
- hummusandsushi 5y ago
  Wow, yeah. I have done some hobby work with digital colors and rendering and I had no idea how used to the visual artifacts from math done on sRGB values directly I was that I just assumed a "fancy" transformation. Thanks for the insight.

fsloth 5y ago

The gradient mixing example is broken. "Color gradients are supposed to be equally bright around the midpoint" This is false. Nobody mandates this. There is no "correct" way to do it, every one of them is arbitrary (although some do look better than others and the suggested method is better than the default linear interpolation). It is completely analogous to smoothing curve in animation - it's about what sort of interpolation mechanism you use. If there would be a standard for specific perceptually pleasing gradient, then one could claim "does not follow standard X". The point of the article is usually abslutely correct, though: "The correct way to process sRGB data is to convert it to linear RGB values first, then process it, then convert it back to sRGB if required."

barbegal 5y ago
Whilst it is true there is no "correct" gradient, the author is making the reasonable assumption that the gradient can be simulated by two linear light sources (A and B) being shone onto a perfectly reflective (white) surface. Each light at full brightness is one end of the gradient. To calculate a colour at x% along the gradient you turn light A on to (100-x)% and B on at x%. The issue with this is that the human eye perceives brightness slightly differently at different frequencies (and combinations of frequencies) so the perceived brightness of the gradient may appear non linear. That isn't to say that the browser generated gradient is perceived in this way, it is generally even more non linear in its perceived brightness.
- fsloth 5y ago
  Gradients are design tools. The gradient interpolation function can be designed around some physical mixing hypothesis but there is no first principles rule as such. Focusing on the luminosity is only half of the battle. For nice looking gradients that are pleasing to design with, generally for aesthetic reasons you also want the perceived color saturation to be interpolated in a predictable way. For reference, here is a nice example of an approach to find a nice looking mixing function: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- barbegal 5y ago

elevanation 5y ago

I don't see a clear "why" for fixing this explained in the post. Yet if we assume this should be fixed, how should the community fix this? Has this been discussed at the appropriate standards bodies and conferences?

popcorncowboy 5y ago
Yep. Because this is a perfect example of something that only matters in ivory towers, but not "on the street". The fact that it HAS been 20 years and browsers "haven't bothered" to "fix" this only goes to show how unimportant this really is. The author is not wrong about any of it, but that only strengthens the argument that there isn't a compelling "why" for "fixing" it (let alone that changing how browsers render outputs really WOULD break every site on the internet that is designed for how sRGB has worked in browsers for 25+ years).
- Silhouette 5y ago
  The fact that it HAS been 20 years and browsers "haven't bothered" to "fix" this only goes to show how unimportant this really is. I couldn't disagree more. Browsers and modern web development style keep kicking out tried and tested technologies in favour of newer alternatives that are objectively inferior. This is not a good thing if you're interested in an attractive, functional WWW. In this case we stopped using real images prepared by real graphic designers and digital artists using real graphics software and we substituted rounded corners and gradients and web fonts and scalable line art graphics. You can argue about whether this has advantages by reducing data sizes or cutting costs through allowing developers with bland toolkits based on "flat design" to do styling work instead of hiring experts. What you can't seriously dispute is that those new techniques render really badly in some or all of the major browsers and now many sites look bad unnecessarily and some become harder to use as well.
  - rnvannatta 5y ago
    I guess color theory hasn't been given much love in web development because it's hard and murky. Once you do a dive into it, you realize there's no correct answers, only tradeoffs. It's a lot harder to be zealous about some color model being the ultimate color model because you'll encounter reality soon enough. I suppose the original author is a zealot for linear SRGB, but that might change once he encounters a black and white gradient interpolated in linear.

avereveard 5y ago

It would be helpful to have the expected result near the browser output. anyway, I think the "correct" scaling is at the very least objectionable. from a numeric point of view, it whould mix in gray, but from a visual poin of view we do preceive the outer box as darker because non linearity in dislpay and perception.

formerly_proven 5y ago
> anyway, I think the "correct" scaling is at the very least objectionable. from a numeric point of view, it whould mix in gray, but from a visual poin of view we do preceive the outer box as darker because non linearity in dislpay and perception. I can barely perceive a brightness difference between the two areas. Meanwhile, scaling the gamma-encoded image results in a severely wrong result where the outside is far darker than the inside.
penteract 5y ago
I noticed some extreme weirdness with the "correct scaling" example. For me (Firefox on Linux using LCD displays) , it looks different depending on which monitor I'm using - on one, the outer part of the gray square looks like there are yellow dots, while on the other monitor, it flickers, but only while the image is over a particular place on the physical monitor (this happens with other images where adjacent pixels frequently have a large difference in color). Also, the apparent color changes depending on the zoom level - at anything other than 100% zoom, the effects described above disappear and the outer square appears darker than the inner one (although not uniformly). This may be linked to the bug that causes the browser to scale the image incorrectly.
- formerly_proven 5y ago
  > on one, the outer part of the gray square looks like there are yellow dots, while on the other monitor, it flickers, but only while the image is over a particular place on the physical monitor (this happens with other images where adjacent pixels frequently have a large difference in color). Your monitor likely has a 6-bit panel and uses FRC to emulate an 8-bit display. This tends to cause content-dependent flickering and other temporal artifacts.

barbegal 5y ago

It is quite astonishing that color is still this broken even in most applications designed to work with colored images. Are there any good software libraries that can be leveraged to prevent this? And I agree with the author about his reasoning that sRGB is compressed data. An audio equivalent is the Mel scale https://en.wikipedia.org/wiki/Mel_scale https://en.wikipedia.org/wiki/Mel_scale

thrdbndndn 5y ago
Or the good ol' pre-emphasis [1]. They were not really common in the Western (maybe more so in vinyls, but I don't collect that) but it's such a pain in ass when I was collecting Japanese CDs from 80's. https://wiki.hydrogenaud.io/index.php?title=Pre-emphasis https://wiki.hydrogenaud.io/index.php?title=Pre-emphasis
- Zardoz84 5y ago
  All HiFi vinyls and cassettes are/was recorded using pre-emphasis and required a de-emphasis filters to reproduce correctly the sound.
rnvannatta 5y ago
It's not astonishing to me, because I believe the author is not entirely correct about color being broken. sRGB color is not the perfect color space, but in general it's better for UI than using linear color, which the author seems to be advocating for. The web is primarily UI. Not only that, but sRGB is the color space of probably 95% or more of devices, and of all low end computer monitors. sRGB is designed to balance perceptual linearity with encoding cost. It's very cheap to encode, and perceptual-enough that you can store a channel in 8 bits with high quality (linear value needs 16 bits to be comparable, and it's still worse unless you use half floats instead of unorm. It's common to go as low as 5 bit sRGB channels for albedo in computer graphcis.) I am a graphics engineer, I've had a lot of colleagues learn the aphorism "don't do math in linear" once they get first burned. > Unfortunately, by calling it a "color space", we've misled the vast majority of developers into believing that you can do math on sRGB colors That belief is an over-correction in my opinion. The examples that the author shows are all about achieving physically correct lighting. The Rubik's cube image blended with 25% white doesn't look physically plausible because it's not being done in linear color. But the goal with UI is visibility, not physical plausibility. If you want to cover something with a UI element at 50% transparency, you want 50% of the UI and 50% of the background, not a physical model of some transparent medium. sRGB does however suck for defining gradients, but I think that's more to do with it being RGB. For this what I generally advocate is a luma/chroma model. Other posters have mentioned Oklab which is great, though even plain YCbCr will get you 80% of the way there while being cheap to convert to. You still want to do that in gamma/perceptual space though, not linear. The author didn't show gradients between white and black. Gradients between colors of 2 different luminances look awful in linear^. However I totally agree with the author on zoom. Web browsers should be doing zoom/image resampling in linear space. Images shouldn't qualitatively change based on their zoom level. ^ https://external-preview.redd.it/voeyOYu6Ds-fLLU7nR4kABmFgUEAkeibipER9YbbdX0.png?auto=webp&s=fab9cfe923659e1754c73a103138ce874f4c2510 https://external-preview.redd.it/voeyOYu6Ds-fLLU7nR4kABmFgUE...

5350-uiop-1130 5y ago

i would not say it was "broken". maybe just not implemented correctly.

barbegal 5y ago
Here's a real world image I found on the internet which is broken, both the left and right side of this image should have the same brightness (50%) but at the default browser scaling it appears that they have different brightness which is wrong and thus broken. https://www.redsharknews.com/hs-fs/hubfs/Imported_Blog_Media/Two_superimposed_checkerboard_patterns_also_create_moire_patterns_1-1.png https://www.redsharknews.com/hs-fs/hubfs/Imported_Blog_Media...

naoqj 5y ago

The fewer power we give to designers, the better for us. A website is an interface, not your own personal fiefdom to grow your portfolio.

mawadev 5y ago
A website is an interface to display ads while you pad content around them.
tpush 5y ago
How does your comment have anything to do with this post?
ChrisRR 5y ago
less power, fewer powers

jbverschoor 5y ago

Well, the gradient is specified as an RGB gradient, yet the post talks about brightness. That's not the right comparison. There are different color models, and a gradient will simply interpolate between the values. A better example would be to use HSL or LAB for the gradients (Red->Green): background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(120, 100%, 50%)); background: linear-gradient(to right, lab(50% 128 128), lab(50% -128 128)); background: linear-gradient(to right, lab(50% 128 128), lab(100% -128 128)); The two different LAB values for "green" show that if you're just changing Lightness, you'll get a darker share of green. The RGB green needs 100% Lightness. HSL produces the same output as an RGB gradient, which is wrong, as only L should be modified. LAB works only in safari, and although the result is slightly different, it's still incorrect, probably due to my conversion

danbruc 5y ago
I don't think this is the best approach. There are two independent things in a gradient - the colors to interpolate between and the interpolation path - and I would not tie them together. If I specify the same colors just using different color models, then I still want the same gradient unless I explicitly demand different interpolation paths. You would not want that interpolating between 0 and 42 yields a different result than interpolating between 0x00 and 0x2A, would you? My ad hoc expectation would be that I get a linear interpolation of perceived brightness, saturation, and color independent of how I specified the color to interpolate. Or maybe even better a path of minimal perceived color difference with uniform perceived color difference along the path which is probably at least slightly different from interpolating brightness, saturation, and color independently.
- jbverschoor 5y ago
  Values in different colorspaces are not fully interchangeable. Some values don’t exist. Some might have multiple values in another space
  - danbruc 5y ago
    That doesn't really matter, you don't really need to convert between different color spaces that much. Whatever the user specifies you convert into one color space, say CIE XYZ or whatever suits the interpolation you want to perform, and then you convert the interpolation result into whatever you need as the output color space. The only real requirement is that the interpolation space covers all input spaces, then it does not matter that not all input spaces cover the same colors or have non-unique representations.

notorandit 5y ago

Well, no browser has correctly implemented tables since ever, why should they bother about colors?

ainar-g 5y ago
This is the first time I ever hear about it, to be honest. Is there a link to something like OP but for tables?

illys 5y ago

Keeping aside the browser issue (which is already a quite interesting issue)... The correct scaling double square is already an issue with my eyes: Mixing black and white dots to produce a grey was a pretty common trick when we did not have enough colors in our computers decades ago. But when I step back to lose the perception of the texture, why do I still see a very different grey than the center-grey with the same overall brightness? I can't even say which one is brighter/darker (my answer changes when I look with a different mindset).

planede 5y ago
Many displays are not calibrated well to do that test justice. Also if you have a high DPI display, then the browser could already scale that picture for you, screwing with the test. You should display those images with image pixels matching device pixels. You can visually test your display calibration with [1], but you should ensure that the image is displayed 1:1, which might not be the case with your browser and hiDPI settings. [1] http://www.lagom.nl/lcd-test/gamma_calibration.php#gamma-test-2.png http://www.lagom.nl/lcd-test/gamma_calibration.php#gamma-tes...
- dr_zoidberg 5y ago
  Chiming in for HiDPI displays, I have a global 125% scale, so I had to zoom out the browser to 80% to get 1:1 on the rendered images.

tomduncalf 5y ago

Colour is definitely a complex thing. My friend who is a graphic designer prefers to use Firefox over Chrome on MacOS because it renders “nicer” colours - being somewhat colourblind, I had never noticed, but indeed there is a subtle difference between how the same hex colour code renders in both, according to DigitalColorMeter…

usrn 5y ago
Maybe it's because I'm on Firefox that all these images look identical. I have no idea what the author is talking about. EDIT: nevermind, I see it now. The square in the last few images is slightly green when CSS is scaling it.
infensus 5y ago
I have close to zero knowledge about this, but I believe it may be because of different default color profiles? On Linux, when I force Chrome to use sRGB (chrome://flags/#force-color-profile) it makes the colors identical to Firefox's. It doesn't seem to make a difference on MacOS though, the colors are always identical there

fxtentacle 5y ago

... and this is why I prefer desktop apps like Lightroom Classic CC over their web-based equivalents. This and broken shortcut keys, e.g. Ctrl+R shell reverse search in a web IDE.

mtklein 5y ago

Having worked on this in Skia (and so Chrome, Android) for a good while, I can vouch this is an issue browser/phone developers would have liked to fix a long time ago, but have kept by default for compatibility with old expectations. A lot (~all) of web/app design was and still is done with this broken interpolation in mind, which then all breaks when math is done in a way that more accurately models light. It’s a bit of a chicken and egg problem that we can really only fix by allowing content to explicitly opt-in to linear working color profiles. And sadly that’s not going to solve everything either: while a linear profile is good for color interpolation, sRGB encoding is ideal for brightness interpolation. You’re stuck choosing between ugly red-green interpolation and nice white-black (sRGB) or between nice red-green and ugly white-black (linear). There are some more complex color spaces that do try to be the best of everything here, but I’m not aware of any browser or OS providing support for working with these perceptual color spaces. A similar problem comes up when trying to manage color gamut on screens and systems that are intentionally blown out to look vivid, vibrant, shiny… looking at you Samsung phones. Any properly color-managed image there looks incredibly dull compared to the bright defaults you’ve grown accustomed to. If we take 0xff red to mean “full sRGB red”, that’s much less bright these days than if we just assume it means “as red as the screen will go.” It’s much like how TVs are (hopefully were?) set in the store in bright shiny mode to induce you to buy them, not set to reproduce colors accurately.

orlp 5y ago
In what way is linear black-white interpolation ugly?
- edflsafoiewq 5y ago
  https://i.imgur.com/CRq6Kn8.png https://i.imgur.com/CRq6Kn8.png (left: linear, right: sRGB) In linear interpolation, there's too much white and not enough black. That's why gamma correction/sRGB exists after all: if you encode the linear value directly, you waste most of the space on white values you can barely tell apart.
  - orlp 5y ago

tiborsaas 5y ago

It's a bit sad that the author went to the depths of buying this domain, create this page and then don't provide a correct library they think it's appropriate like https://colorjs.io/ https://colorjs.io/ There's an article with a much more sympathetic approach: https://www.joshwcomeau.com/css/make-beautiful-gradients/ https://www.joshwcomeau.com/css/make-beautiful-gradients/ Not sure if this is trolling or not, but the closing HTML tag misses a > :)

DrewADesign 5y ago
> It's a bit sad that the author went to the depths of buying this domain, create this page and then don't provide a correct library they think it's appropriate like https://colorjs.io/ https://colorjs.io/ Colorjs.io doesn't address most problems the website highlights.
- tiborsaas 5y ago
  That's why I would have appreciated a suggestion that does. There are 3 issues highlighted: color mixing, transparency and scaling. The second is entirely subjective and I prefer what browsers do. Scaling is irrelevant (the issue is not explained) to color handling.
  - DrewADesign 5y ago
    The author is talking about the way browsers render graphics. Unfortunately, there's no way to correct that without modifying the browser itself.
    - tiborsaas 5y ago
      And when there's no way, you use libraries. Others also mentioned CSS4 solutions and other alternatives. It's really not that bad as the articles paints it (pun intended).
      - DrewADesign 5y ago

jeroenhd 5y ago

Web color isn't broken, it's specced weirdly. Any attempt at "fixing" this would miscolor every existing website for the sake of correctness. The SVG color space definition is the exception here, browsers can do better in that area. Still, it's silly to expect browsers to change the way their color system works and go against the expectations of color blending for web developers just to tick a correctness box. Make a time machine and take it up with Microsoft en Mozilla in the early 2000s if you want the default color system to work differently. Write a patch for Chrome/Firefox/WebKit to implement the SVG spec if you're so passionate about this. People generally don't care about this stuff, they want the result to look Good Enough™ and that's exactly what the current implementation does. I don't think any browser maker will put in the effort to do much about this "problem".

jiggawatts 5y ago

Not just the web: PC colour is totally and utterly broken. The web is just a small part of this. There's an entire field of colour management that Microsoft, Linux, and Google are carefully ignoring. They'll occasionally stumble upon ICC colour spaces, HDR, or 10-bit, but they make sure to break everything even worse and leave it like that forever. Sigh... I have gone on the same rant annually since about 2010, starting on Slashdot. Most recently on YCombinator News in 2021. It's a whole new year, time to repeat my rant and pray to the IT gods that someone at Microsoft or Google stumbles upon this: The current year is 2022. The future. We have these amazing display technologies such as OLED, HDR, and quantum dots. In this sci-fi fantasy world I cannot do any of the following: - Send a photo in any format better than an SDR sRGB JPEG in the general case, such as an email attachment, document, or chat message. These are 30 year old standards, by the way. - Send a photo in any format and expect colour reproduction to be even vaguely correct. Wide-gamut is especially pointless. It is near certain that the colours will be stretched to the monitor gamut in an unmanaged way. People will look either like clowns or zombies depending on the remote display device, operating system, software, and settings. - Send a photo in 10-bit and expect an improvement in image quality when displayed. - Expect any industry-wide take-up of any new image encoding format. It is a certainty that each vendor will do their "own thing", refuse to even acknowledge the existence of their competitors, and guarantee that whatever they come up with will be relegated to the dustbin of history. Remind me... can ANY software written by Microsoft or Google save a HEIF/HEIC file? No... because it's an "Apple" format. Even most Microsoft software can't read or write their own JPEG-XR format, let alone Google or Apple. Netflix developed AVIF but I'm yet to see it taken up by any mainstream system. Etc... New in 2022: - Display HDR on Linux. - Display HDR even vaguely correctly on Windows. I mean, good try, but simply clipping highlights without even attempting to implement tone mapping is just plain wrong. - Use a colour calibrator device on Windows 11, which totally broke this functionality. - Use a colour calibrator device for calibrating a HDR display. I have a device that can measure up to 2000 nits. Can I use this calibrate my HDR OLED laptop display? No. That's not an option. - Turn on HDR in Windows 11 and not have it cause a downside such as restricting the display gamut to sRGB. - Use HDR in any desktop application for GUI controls. - Use colour management for any desktop application for GUI controls that isn't an Electron application -- the only platform that does this vaguely correctly under Windows by default. Things have even regressed over the last few years! Windows 10 Photo viewer could do colour management -- badly. It would show an unmanaged picture at first, and then overwrite it with the colour managed picture a bit later, so you get colour flickering as you scroll through your photos. Okay, fine, at least it was trying. Windows 11 does not try. It just assumes 8-bit sRGB for everything. Similarly, the 14 year old WPF framework supported wide gamut, 16-bit linear compositing, and HDR. The "latest & greatest" Win UI 3 framework... 8-bit SDR sRGB only.

BlueTemplar 5y ago

> Unfortunately, by calling it a "color space", we've misled the vast majority of developers into believing that you can do math on sRGB colors, and by exposing the raw sRGB numbers to users, we've misled them into thinking those numbers have a reasonable meaning. But sRGB spec does specify a color space ! And these numbers do have a meaning - the unreasonableness is with people's assumptions. The issue here seems to be rather that developers and users, when hearing "space", assume a linear, Euclidean space, except color spaces are usually none of these ! But I don't really see what other word could be used here instead of "space" ? ---- A related issue (and potentially a fix) : In 2015 developers (and users) could (usually) just stay blissfully ignorant of colorimetry and assume sRGB everywhere. Today, with wider gamut screens becoming common even in non-professional monitors ("HDR"), and non-Apple OSes starting to get proper support for non-sRGB specs, sRGB cannot be assumed everywhere. So learning some colorimetry might be a pre-requisite for comptetence now. (Except for Web text colors, IIRC they're still limited to 8 bit per color = 256 values, sRGB ?)

metalliqaz 5y ago

This is one of those things that seems extremely picky to me and at the same time I'm glad that someone out there cares enough about it to fix it.

antattack 5y ago

I would imagine it actually looks even worse since low-mid tier laptops can only display 60% sRGB.

toastal 5y ago
Even claimed 100% sRGB isn't the whole 100%. I'm aghast at how only recently 100% P3 coverage is finally becoming normal at the high-end (and is still uncommon for gaming-class laptop displays). I can't even consider System76 or Framework or similar for this reason. If you edit any visual content or work with designers, you owe it to yourself to get a P3 display that is calibrated.

ricardobeat 5y ago

I don’t understand the “correct scaling” part. The outer ring of the square has a mix of gray and darker pixels, it cannot possibly be as bright on average as the center square which is all grey pixels?

jeroen 5y ago
It looks like it is supposed to be a centre of 50% grey and a ring of alternating white and black pixels. As the note says: if you're seeing a darker ring (alternating black and grey pixels) your browser is messing up.

iruoy 5y ago

I just found out that `lch()`, `lab()`, `oklch()` and `oklab()` are already supported in Safari (stable)[1]. The normal versions have a white point of 50 and the ok versions have a white point of 65, which is the same as sRGB[2]. [1]: https://wpt.fyi/results/css/css-color?label=stable&label=master&product=chrome&product=firefox&product=safari&q=label%3Ainterop-2022-color https://wpt.fyi/results/css/css-color?label=stable&label=mas... [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

npigrounet 5y ago

oxplot 5y ago

Very interesting aspect of color management which I never paid attention to. I wrote a simple primer on color profiles [1] a while back which makes mention of state of custom color profiles on the web. I do wonder what result you'd get if you blended images with different color profiles on a web page as browsers can view non sRGB based image content. [1]: https://blog.oxplot.com/understanding-color-management/ https://blog.oxplot.com/understanding-color-management/

usrbinbash 5y ago

As someone who has little to no idea how colors and operations on them work, I must say that was an incredibly interesting read!

enriquto 5y ago

> The image should retain the same overall brightness as it is scaled down. Incorrect. While large regions of homogeneous color should indeed retain their brightness, thin one-dimensional structures are supposed to become darker and disappear gradually as the image is scaled down.

gjm11 5y ago
"Supposed to" in what context, by whom?
- enriquto 5y ago
  In any context, by everybody. This is what happens when you move far away from an object, which is what "zoom-out" or "downscale" is all about. The total amount of light that you receive from an object decreases with the square of the distance.
  - planede 5y ago
    Yes, but if you scale to half size (in linear size), then the overall luminance could go down by 1/2*1/2=1/4, not more, not less.
  - formerly_proven 5y ago
    According to this logic scaling an image down would make it darker.
    - enriquto 5y ago
      It does. Imagine a one pixel wide vertical white line on black background. As you downscale it, by whatever reasonable means, the line becomes a darker and darker grey. EDIT: This is in the context of the image shown in the article, which is a gradient image consisting in light lines over black background. Of course, if you have thin black lines on white background, they will become ligter upon downscaling. In practice, on a real image, some parts will become darker and others lighter, depending on their particular textures.

makerofthings 5y ago

The “correct” colour mixing example looks a little better, but only a little bit. The others, I don’t see a problem(I have m1 MBP, Firefox). I don’t think any of this would really affect my browsing experience one way or the other…

jstanley 5y ago

The worst part about web colour is that it's not even consistent. If you draw a PNG containing a rectangle with a given colour on to a page with background colour of the exact same RGB values, then it can look different. Here's an example: https://incoherency.co.uk/interest/colour.html https://incoherency.co.uk/interest/colour.html And here's a screenshot of how it looks on my browser (Firefox 99.0, Ubuntu 20.04 LTS): https://img.incoherency.co.uk/3812 https://img.incoherency.co.uk/3812 The square is a different colour to the page background colour despite having the same RGB value (#0cf4c7) but they look different. No amount of changing the colour mode selection in GIMP can fix this. I opened the screenshot in GIMP and used the colour picker tool to see what colour my #0cf4c7 has turned into, and in the screenshot image it is #67f1c7. Strangely, when I draw the screenshot in the browser, its colours stay the same, so obviously there is something you can do to the PNG that will make it render the colours you chose.

electroly 5y ago
I don't see the square, FWIW. The colors are a match in Edge v100.
- jstanley 5y ago
  Interesting. It might just be a Firefox thing. I remember reading a Firefox bug report about this, and the response was that the person's monitor colour calibration must be wrong, which makes no sense to me since even if the monitor colour calibration was wrong, I'd except it to apply to both the page and the image equally. EDIT: This one: https://bugzilla.mozilla.org/show_bug.cgi?id=621474 https://bugzilla.mozilla.org/show_bug.cgi?id=621474 - from 12 years ago.
  - alpaca128 5y ago
    Firefox 99.0 (Linux) here, the square is invisible.
  - infensus 5y ago
    On Linux, I can see the square in Firefox, but not in Chrome. Interestingly enough, the color in Chrome is identical to the color of the square in Firefox, but when I force sRGB in Chrome (chrome://flags/#force-color-profile), it becomes identical to the background color in Firefox. I don't know what to make of that

Eric_WVGG 5y ago

Web color is somehow still a garbage fire. About a decade ago I was hearing that web-safe color was effectively obsolete. Today Firefox chokes on P3 color, and Chrome doesn't appear to care at all about display color profiles. I recently launched a website that had a fire-engine red background and was expected to have a rotating animation above the fold (https://worldparkinsonsday.com https://worldparkinsonsday.com). Even once we got the animation synced perfectly between Chrome and Safari, it turned out that iOS Safari was rendering the video differently. Eventually I gave up and replaced a 128kb mp4 video with a 5mb transparent animated GIF. Shameful. And I had this lil' fellah on my desk smiling at me the whole time https://100soft.shop/collections/dumpster-fire/products/dumpster-fire-vinyl-figure https://100soft.shop/collections/dumpster-fire/products/dump...

wbobeirne 5y ago
A transparent webm probably would have worked for your use case. Or if you were willing to rebuild the animation, it looks simple enough for SVG.
- ekkeke 5y ago
  Unfortunately, I don't think iOS safari has webm support yet.
  - postalrat 5y ago
    Will it break the page if this support is missing?
  - Wevah 5y ago
    HEVC video with transparency is apparently possible[1], though I’m not sure if it’s supported on non-Apple platforms. [1]: https://developer.apple.com/videos/play/wwdc2019/506/ https://developer.apple.com/videos/play/wwdc2019/506/
    - woojoo666 5y ago
      I really hope Apple doesn't use this as an excuse not to support WebM, which is a web standard

kaichanvong 5y ago

the change of HSV from RGB have to say, confusing in-all the online chatter and talk here is at B&W into RGB for colour/color "taste", individual optical focus and further more, its goes beyond chat, news and should be studied. avoid this kind of flaming pit of fun gaming and consult with the person (know and trust). Opticians are great for this in my experience. They actually should point out to you the truth.

cout 5y ago

Something I've been curious about for a long time: I grew up using an IBM 8513 VGA monitor connected to a PS/2. That's the mental model I use when thinking about color; to my brain, the default grey color (value 7) is "right in the middle" between what I think of as black and white. What modern colorspace most closely maps to the color space I grew up with?

323 5y ago
You can hardly call IBM 8513 VGA as having a color space. It just has colors - meaning the color space it's kind of arbitrary, two different monitor models could have different primary colors (as in slightly different reds/blues/greens).

jrd79 5y ago

The (s)RGB color model is not some legacy choice. It is closely tied to how colors are stored, composited, and communicated to physical displays. And this problem seems a bit artificial - how often do you see a linear gradient between colors like the ones shown in the examples? Finally, it is also trivially easy to get a gradient that looks like the "correct" ones presented in this article, by just adding a few additional color stops along the way that are closer to where you want the intermediate values to be.

Conlectus 5y ago

This is a bit out out of date. Interpolation colorspace can be specified as of CSS Color Module Level 4. See https://drafts.csswg.org/css-color-4/#interpolation-space https://drafts.csswg.org/css-color-4/#interpolation-space I don't believe it is yet implemented in browsers, but I know Chrome at least is working on it.

Ruuttu 5y ago

est 5y ago

The best color mixing I've seen in a while is this https://github.com/scrtwpns/pigment-mixing https://github.com/scrtwpns/pigment-mixing

wolfofcrypto 5y ago

peanut_worm 5y ago

I doubt its ever going to change for compatibility reasons

jupp0r 5y ago

Can/is there a CSS library that does the transformations from an arbitrary color space to sRGB for you? Would it make sense to enhance CSS to an extent where this is possible?

efitz 5y ago

While I sympathize with people for whom this matters, I still find it weird that other people care/are concerned about/want to control my experience. I don’t want you to control my experience: Maybe I like having weird colors; maybe I’m color blind and need alternative colors; maybe I don’t want color at all and want a web experience that is text centric. The model of the web is backwards and it makes browsers ridiculously over-complicated because they’re software designed to tel other people control my experience navigating and consuming information. Give me the information and keep your colors and layout and scripts and ads and …

Veen 5y ago
Unless you are the one implementing color rendering in web browsers, someone else is controlling your experience of color on the web.
- efitz 5y ago
  I can select a web browser that displays colors how I’d prefer, just as I select a monitor. The problem is that the web as currently constituted allows (encourages) the web page author to dictate my experience and my browser will mostly obey. I’d prefer that there be no such thing as “pages”, just “information”, and that all display decisions would be made by software I completely control.

bee_rider 5y ago

Designs which depend on a particular colorspace are bad anyway. I used the proper black background/white text override in my settings for a while, it was a great improvement on the sites where it worked. But it broke too many sites. Not really sure how we've managed to regress so far on the ideal of having webpages just provide content and letting the browser render it as appropriate. Oh well, readerview it is I guess.

robbrown451 5y ago

Probably the best way to test if you are doing it right is to compare to an optical blend. Say you blend red and green, such as by having a red ( rgb(255,0,0) ) div, and putting a div that is green with 50% transparency over it ( rgba(0,255,0,.5) ). Now, make a checkerboard pattern of red and green divs. Look at it from far away enough that it appears as a solid color. (easier if you make each div occupy one pixel, while trying to avoid any antialiasing) You could also use something like frosted glass to blur it. Do they appear the same color? I would not expect it to appear as a bright yellow, but a rather dark yellow. (but not so dark as it appears brown)

wunderlust 5y ago

Maybe we could instead say, "web color is still not perfect". Nature is a wild animal and even getting computers to simulate natural color at all is a feat. Want to see real color? Get out of the fucking building.

rawoke083600 5y ago

Man this is another good example of the quote: "Never underestimate the value of a 'good-enough' solution" I commenting as a multi-decade programmer, but alas I know nothing about color ! Even though I've dabbled in graphics here and there in my career. (this is just for background) My main point is that, as "technical person" with NO skin in the game. I can honestly say I can't see the difference, or if I can, why one is better or not. Not saying it should not be fixed, but if I am a sample of the "ignorant majority" that don't know about colors should this bother me ? Or bother me more ? I hope I'm not offending the "experts in this field" just saying, your clueless audience(me) don't even know what is wrong :)

jve 5y ago
I'm a casual developer too, not knowing much about colors. But I can see the difference. For "my browser" visual image, I can kind of see "vertical pillars" in the middle which which reminds me of times where we had not many colors in our palette. Moreover, if looking at red and moving on horizontal axis - it is same red and after only some distance it starts to change. The correct color mixing for me looks better - the colors start to change instantly and more smoothly.

blueflow 5y ago

Can someone explain this for a sight-impaired person?

kps 5y ago
Consider someone playing a trombone, doing a slide between a low note and a high note at the same volume. With web color it gets quieter in the middle.

blacklight 5y ago

This goes back to the original sin of using RGB/sRGB to express natural colors. Nature doesn't work in terms of how much red, green and blue it needs to mix on the canvas. Sure, it's great and intuitive to represent colors on digital systems, but that's it. Light in nature works in terms of hue/tint along a continuous spectrum, brightness and saturation. Color spaces such as HSV/HSL model these concepts much better than any RGB algorithm, and doing math with them produces results that actually make mathematical sense. YUV also takes human color perception into account. It's not a coincidence that most of the smart lights usually use HSV/HSL color spaces, and most of the cameras opt for YUV* based color spaces.

krick 5y ago

Gradients in a better colorspace indeed make more sense to me (all of HSL/HSV/Lab are way more useful for practical applications than what sRGB does), same as HSL palettes in tools like Photoshop, but this transparency example I don't understand. Admittedly, I never gave it much of thought, but all these "my browser" examples look MUCH better and more intuitive to me, than the "correct" case. Well, I don't know, maybe 25% opacity should look a little bit more potent, but these "my browser" examples are actually usable, they look good, even though I agree they should all look the same (they don't for me). But each one of them looks better to me, than the "correct" example, which simply cannot be used to shade a picture. It doesn't look like a glass. It's ugly.

joshwcomeau 5y ago

I wrote a blog post all about this! And how to get better color-mixing in your CSS gradients. Shameless plug: https://www.joshwcomeau.com/css/make-beautiful-gradients/ https://www.joshwcomeau.com/css/make-beautiful-gradients/