Web color is still broken

by Aissen • 4 years ago

643 200 4 years ago

blenderdt• 4 years 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.

vanderZwan2• 4 years ago

They use sRGB color space. If it used linear color space it wouldn't have this issue.

nness• 4 years ago

I assumed the interpolation of gradients isn't a matter for the colorspace?

hummusandsushi2• 4 years 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?

thrdbndndn2• 4 years 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.

hummusandsushi2• 4 years 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.

fsloth5• 4 years 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."

barbegal4• 4 years 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.

fsloth5• 4 years 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/

barbegal4• 4 years ago

As an addendum a good way to visualize gradients of equal perceived brightness is to use an Hue Chroma Luminance (perceived brightness) picker like http://tristen.ca/hcl-picker/

As you can see, preserving luminance means you get a restricted range of gradients to choose from.

Certhas• 4 years ago

Well... color is physics though. Three spectra that our eye are sensitive to span a vector space dual to the space of all light spectra [1]. That space naturally has a linear structure. You can have twice as much light of one color or the other, and you can add the light of different colors.

So there _is_ a natural interpretation of linear interpolation between two colors in physics. Concretely: Imagine two lamps with the two colors and the same brightness. You start with one fully turned up and the other fully turned down. Then you increase the one while you turn down the other keeping the brightness constant.

fsloth5• 4 years ago

IMO gradients are not based on physics any more than selecting a smoothing curve in animation is. They are design tools - even though physics can be used to analyze them.

I say this as a software engineer with a MSc in physics and a computer graphics/traditional graphics afficinado :) - not to boast with my eminence as that would be silly on this site but just that I've given a long and hard thought on this matter over the years.

rocqua• 4 years ago

Color is not physics, confusingly.

The 'eye sensitivity response' mode is a color space. But it has problems. Notably, it can represent a lot of impossibly pure colors (because e.g. your red detectors have a lot of overlap with green so pure red acitivation is impossible). More relevantly, a linear interpretation of this system does not match what people see. Perceived brightness is close to logarithmic. If the cell has double the activation, that looks like a constant increase in brightness.

Finally, the way we see color depends on the context, mostly the ambient light. This is largely (but not completely) captured by the idea of color-temperature / a white point. But there are also optical illusion effects around brightness and color.

planede6• 4 years ago

SVG gradient is specified to do the interpolation in sRGB space by default. However officially SVG 1.1 supports interpolation in linear colorspace, but no browser implements it AFAIK.

https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation...

edit: An other mode of interpolation that is missing even from the spec is using premultiplied alpha. It would be essential to correctly render upscaled transparent raster images, where you don't want to see the "color" of the fully transparent pixels to leak through when it gets interpolated with a neighboring opaque pixel.

DrewADesign5• 4 years ago

They should have said 'would be actually useful if' rather than 'should be.' From a design perspective, the utility of gradients that come to a muddy gray in the middle is nonexistent. Framing it as a way to make them more useful to people who need them rather than 'correct' would have been more productive, but way less likely to hit the top stories on HN.

I'd say the transparency assertions are more dubious. There's a zillion ways to superimpose a color on an image and the one they suggest isn't even more consistently useful than the others, let alone 'correct.'

neltnerb5• 4 years ago

I've been studying color theory a long time, including giving talks about color mixing and indeed HSL space specifically for a decade...

I'm with you, there are ways that I think color mixing should be done but I would never say that mine is "right". That's silly, it's art.

I think color mixing should be done using HSI colorspace (luminosity replaced with intensity defined as the sum of all light power outputs) with HS defined as per HSL/HSV and interpolation between any two colors done by a line drawn between the coordinates. The reason for this is that in my applications I use spotlights so obviously "total brightness" is way more important than "display lightness". It's just physics, and no right or wrong about it, it's a different display kind.

This is "correct", the colorspace is explicitly constructed to be used in this way such that each step is perceptually even. But it also isn't necessarily what people want, to me "fade from red to cyan" automatically goes through white because of course it does... but what people usually mean is they want the hue to spin around at fairly constant saturation (ignoring that the direction of rotation matters) because it looks good. Red to orange to yellow to green looks vastly nicer in a gradient than going a direct path through white.

That all said (mostly because I find it bizarre and fascinating even after a lot of study), the arguments in the OP are not about whether a given gradient is objectively right but rather whether they match the spec. Things should match the spec...

fsloth5• 4 years ago

Yes, I agree it is bizarre and fascinating and everything you said about traveling in various colour spaces:)

Also agree "should match spec" is always a valid argument.

To repeat, and be clear, my critique was about what the page says "Physically correct color gradients..". This should have been "according to spec you should compute a gradient this way, and this is what your browser does...".

bick_nyers2• 4 years ago

What's the best way to learn color theory? Like actually, properly learn it? I consider my interest in TV/Movies to cross over into the enthusiast category, and I work with medical images and video (compression mostly). I've spent time with the basics, and have recently started reading about BT 709 etc., but am unsure how best to really dive-in to color theory headfirst

PaulHoule3• 4 years ago

Rainbows, where you sweep around the hue circle, have plenty of room for artistic license. The basic problem is that you can’t make a blue anywhere near as bright as the brightest yellow you can make. If you try to maximize brightness some parts are darker and some brighter in a way that is meaningless, particularly for scientific visualization. If you keep the brightness constant, however, it never gets very bright and is unsatisfying that way.

I like Rainbow Dash’s tail in My little pony because the artist chose to let the brightness vary but did it deliberately so it is meaningful in color and B&W.

mrob• 4 years ago

When you're using a ringing filter, sRGB is often a better colorspace for upscaling than linear RGB, because it distorts the ringing artifacts to make them less noticeable by putting them mostly in the highlights, not the shadows. It's not mathematically "correct", but it's better suited to human perception, similar to how minimum phase filters can perceptually outperform linear phase in audio processing, where pre-ringing is more noticeable than post-ringing.

See "Catch #3" here:

https://entropymine.com/imageworsener/gamma/

And you can sometimes get even better results using a sigmoidized colorspace. See:

https://legacy.imagemagick.org/Usage/filter/nicolas/#detaile...

planede6• 4 years ago

It still feels like that sRGB is accidentally better here, but a different, non-linear colorspace could outperform it for this case.

AtNightWeCode• 4 years ago

Agree. It is also a good idea to add a third color in middle for those kinds of gradients.

orbital-decay• 4 years ago

"Color gradients are supposed to be equally bright around the midpoint" This is false. Nobody mandates this.

That's just because their wording is imprecise. If you replace color gradient with "perceptually linear hue gradient", which I think is strongly implied, then that would be 100% correct. Hue is a color coordinate completely independent from others like lightness, in a perceptually uniform color space.

But you're on point - there's no right way to do it. Not because of it's a matter of taste or something (it's not). Problem is, there's currently no perceptually uniform color models! All models are uniform in some range but fail in various scenarios; human perception is still largely unexplored. As a result, getting it "equally bright" in different viewing conditions with varying intensities is an impossible task, especially when you know nothing about viewing conditions. You have to narrow it down to "good enough in common scenarios". Models like OKLab are trying to do exactly that.

petters• 4 years ago

From the article:

Physically correct color gradients (as you would get, for example, along an out of focus edge between colors) are equally bright around the midpoint,

So I think there is an argument that using a linear color space is more correct.

elevanation• 4 years 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?

popcorncowboy3• 4 years 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).

Silhouette5• 4 years 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.

ChrisRR2• 4 years ago

Exactly, this site isn't very good at explaining anything. I've read the text but I still don't really know what I'm looking at

avereveard• 4 years 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_proven7• 4 years 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• 4 years 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_proven7• 4 years 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.

barbegal4• 4 years 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

thrdbndndn2• 4 years 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

Zardoz84• 4 years ago

All HiFi vinyls and cassettes are/was recorded using pre-emphasis and required a de-emphasis filters to reproduce correctly the sound.

rnvannatta4• 4 years 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-fLLU7nR4kABmFgUE...

redox99• 4 years ago

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.

I'm not sure what you mean by this. I work with game engines and everything is calculated with linear color. Not only anything else would be completely physically inaccurate, it would be unfeasible for modern HDR rendering which supports extreme dynamic ranges with physical units (ie 100000 lux sun).

Maybe you work with mobile devices, where they still haven't fully moved to HDR?

mouzogu• 4 years ago

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

barbegal4• 4 years 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...

naoqj• 4 years 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• 4 years ago

A website is an interface to display ads while you pad content around them.

tpush• 4 years ago

How does your comment have anything to do with this post?

ChrisRR2• 4 years ago

less power, fewer powers

jbverschoor2• 4 years 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

danbruc2• 4 years 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.

jbverschoor2• 4 years ago

Values in different colorspaces are not fully interchangeable.

Some values don’t exist. Some might have multiple values in another space

stupidcar• 4 years ago

While it's true that a LAB gradient will produce a more perceptually uniform gradient, it doesn't alter the article's point that sRGB isn't a colorspace. It has an associated nonlinear gamma function that is used to help compress values to 8-bit, and the result is that interpolating between two sRGB values is not the same as interpolating between them in a proper RGB colorspace, with the result that you'll get brightness problems.

So yes, LAB will produce more perceptually uniform gradients than RGB, but browsers are exacerbating the problems of RGB gradients by not implementing them properly.

notorandit• 4 years ago

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

ainar-g• 4 years 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• 4 years 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).

planede6• 4 years 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-tes...

dr_zoidberg• 4 years 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• 4 years 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• 4 years 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.

infensus3• 4 years 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• 4 years 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.

mtklein3• 4 years 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.

orlp2• 4 years ago

In what way is linear black-white interpolation ugly?

edflsafoiewq2• 4 years ago

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.

mtklein3• 4 years ago

Oh sorry, yeah ugly is a really subjective term, I should have explained.

The 0.5 sRGB grey (aka 50%, 0x7f or 0x80) is right smack at the grey value most people would pick as the halfway point between black and white.

A linear 0.5 grey is way off from that, I think way too bright, but I’m about 10 months off working on this and to be honest this is one of those things like east/west or left/right that I can never remember without working out the math on a piece of paper. Too bright or too dark for sure, not at all a medium grey.

It took my team a long time to not think of linear and sRGB interpolation in terms of good vs. bad, right vs. wrong, modern vs. legacy, etc. There are good uses for interpolating in both color spaces, and an a variety of others like HSL, HSV, CMY, perceptual spaces. Sorry for continuing the problem. There’s no ugly color space; they all have good uses.

nikita2206• 4 years ago

It’s probably just that a gradient between black and white in linear RGB results in a gradient with a midpoint that doesn’t look like _the middle between black and white_ to the human eye. I far as I understand that’s what sRGB fixes, perhaps among other things, and the way it fixes that results in muddy colors when you mix different colors.

Cthulhu_• 4 years ago

Would a new web standard that allows web developers to configure a 'color rendering mode', either on a webpage as a whole or individual parts (e.g. via a css option) solve this issue?

jmull• 4 years ago

The article mentions the color-interpolation attribute.

Chicken-and-egg problems have to be resolved one step at a time. Implementing color-interpolation is a possible first step.

leeoniya3• 4 years ago

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.

OKLab and OKLCH coming soon to CSS4 near you:

https://www.w3.org/TR/css-color-4/#resolving-oklab-oklch-val...

jansan• 4 years ago

OKLab is great. AFAIK even Photoshop uses OKLab to interpolate gradients.

mtklein3• 4 years ago

Oh that’s amazing! OKLab looks really good to me!

gsnedders• 4 years ago

It's already shipping in Safari 15.4!

Note this is a part of what the "Color Spaces and Functions" area of Interop 2022 (https://webkit.org/blog/12288/working-together-on-interop-20...) contains. See https://wpt.fyi/interop-2022?feature=interop-2022-color for the current status.

babypuncher• 4 years ago

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.

This is a problem on a lot of HDR-capable consumer monitors, even expensive factory calibrated ones from Dell. They often lack any form of sRGB clamp resulting in exactly this problem when viewing an sRGB signal. AMD has a setting in their GPU driver control panel that can do this on the GPU without needing the user to provide an ICC profile. The Nvidia driver has a hidden API to do this, requiring the use of third party software to take advantage of.[1]

TVs are a little better in this regard. My Samsung TV has an "Auto" option for color gamut that correctly identifies DCI-P3 and sRGB signals and clamps them accordingly. But the default setting was "native" which made sRGB content look really bad.

1: https://github.com/ledoge/novideo_srgb

ledoge• 4 years ago

They often lack any form of sRGB clamp

And the ones that don't almost universally lock you out of all other color settings when enabling it, often even including brightness. It's ridiculous.

Also, thanks for the shoutout :)

saghm• 4 years ago

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.

I remember when the Pixel 2 came out, there was a minor kerfuffle over it defaulting to using sRGB. It got overshadowed a bit due to some of the more severe issues people ran into with the early batch, but it still apparently got enough of a backlash for them to patch it shortly after to update to a compromise between what I think it called "natural" and "vivid". At the time, I had never paid much attention to color profiles, so my roommate suggested I enable sRGB (which was in the developer settings on the original Pixel) for a week and see if I preferred it. It turns out I do actually prefer it, so now I've used it on whichever phone I've had since then!

tadfisher• 4 years ago

Unmanaged color on wide-gamut outputs is simply godawful. I'm not surprised consumers go for it in direct comparisons, but especially with dark color schemes in vogue it seriously hampers usability by crushing darker shades (at least when lerping to DCI-P3).

TVs and monitors are pretty bad as well, but at least more wide-gamut source material is becoming available and calibration to DCI-P3 or Rec.709 is starting to become a selling point.

tiborsaas4• 4 years 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/

There's an article with a much more sympathetic approach:

https://www.joshwcomeau.com/css/make-beautiful-gradients/

Not sure if this is trolling or not, but the closing HTML tag misses a > :)

DrewADesign5• 4 years 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/

Colorjs.io doesn't address most problems the website highlights.

tiborsaas4• 4 years 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.

jeroenhd• 4 years 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".

jiggawatts2• 4 years 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.

formerly_proven7• 4 years ago

This is because Windows and Linux desktops are fundamentally not color managed. Everyone for themselves - color management needs to be implemented in every single application. Microsoft created scRGB which could have brought system color management to Windows, but didn't go through with it.

Wide-gamut is especially pointless. It is near certain that the colours will be stretched to the monitor gamut in an unmanaged way.

This is also the manufacturer's fault. Some wide gamut displays don't even have sRGB emulation, and pretty much every wide gamut display defaults to their native gamut even in 8-bit mode, which is virtually never the right thing to do. sRGB emulation naturally reduces contrast, which is generally already very poor in all but the highest end PC monitors. To add insult to injury, the 10-bit / HDR (these are technically independent, but generally coupled in monitors) mode is complete shit in virtually every PC monitor advertised with HDR support. So you spend money on a display device that is designed essentially in exact opposition to its capabilities and your needs.

(Naturally, reviewers tend to ignore all of these problems apart from HDR actually being pointless with the current state of PC monitor tech; many praise the "vibrant colors" this gives you. Of course, everyone looks like they got sunburn, but who cares. Vibrant! Vivid! Saturated! The reddest reds money can buy! The greyest blacks! The most washed out shadows! Amazing! 8/10! Recommend! Buy now through my affiliate link!)

jiggawatts2• 4 years ago

wide gamut display defaults to their native gamut even in 8-bit mode, which is virtually never the right thing to do.

Then why have a wide gamut display!?!

The whole point is that you have a greater capability. It should be on all the time, not just when doing "professional image editing" or whatever. There SHOULD be no downside!

Similarly with HDR -- it is literally a superset of SDR, so then why are there endless support form complaints about it causing issues when enabled!? It SHOULD just work! Instead, early versions in Windows 10 would shift the desktop by 1/2 a pixel and cause blurring. Or darken the desktop. Or more recently force everything to sRGB, including colour-managed applications light Adobe Photoshop or Lightroom.

The correct thing to do is for each display to always be running in native gamut mode. The whole concept of in-display colour space emulation is absurd[1]. Instead, the display should feed back its native gamut to the operating system, which should then take care of tone mapping via either software or the GPU hardware. This almost happens now. Displays have EDID metadata that include the "coordinates" of their colour primaries. Windows even picks this up! Aaaaand then ignores it, and even strips out the information in newer SDKs like Win UI 3, because... I don't even know.

[1] Ideally, GPUs should be doing tonemapping under OS control, but to avoid banding this would need 12-bit or even higher output to the display. This would take too much bandwidth, so instead displays do tone mapping using LUTs with as many as 14-bits. Except that these LUTs are 1D and control over them is totally broken...

BlueTemplar9• 4 years ago

AVIF probably has potential, as it's part of the AV1 - once we get AV1 hardware acceleration, hopefully AVIF will become the default picture format too ?

BlueTemplar9• 4 years 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• 4 years 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• 4 years ago

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

toastal• 4 years 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.

ricardobeat2• 4 years 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• 4 years 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• 4 years 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=mas...

[2] https://bottosson.github.io/posts/oklab/

oxplot• 4 years 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/

usrbinbash• 4 years 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!

enriquto3• 4 years 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.

gjm112• 4 years ago

"Supposed to" in what context, by whom?

enriquto3• 4 years 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.

makerofthings• 4 years 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…

jstanley5• 4 years 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

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

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• 4 years ago

I don't see the square, FWIW. The colors are a match in Edge v100.

jstanley5• 4 years 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 - from 12 years ago.

bakhy• 4 years ago

I can't see the square either. Firefox 99, Windows 10.

3232• 4 years ago

I do see a square, also on Firefox 99, Windows 10. I don't see a square in Chrome.

est2• 4 years ago

It looks the same on my Macbook with Chrome.

Did you use some browser extension for eye protection or dark mode?

jstanley5• 4 years ago

Nope, I'm not doing anything weird as far as I can tell.

sph2• 4 years ago

Something's wrong with your Linux, I don't see a square on FF 99, Fedora 36 GNOME/Wayland.

jstanley5• 4 years ago

I don't know what could be wrong. I haven't done anything weird to it. I remember this exact problem from at least 6 years ago, on many different computers. I thought this was just how it was.

digisign• 4 years ago

I don't see it either, same firefox, Ubuntu Mate 21.10 X11.

planede6• 4 years ago

Maybe it's an installed color profile thing, and colors from different sources get interpreted against different color spaces? PNGs typically have a well defined color space (implicit sRGB, or explicitly specified otherwise), but the background might get interpreted in device colorspace maybe.

com2kid• 4 years ago

No square, Firefox 99 Windows, or in Chrome either. Heck even IE 11 renders it correctly!

I think you need to investigate Firefox and how it is using your GPU. Maybe try disabling WebRender? https://support.mozilla.org/gl/questions/1345186

bmacho• 4 years ago

For me setting true

     gfx.color_management.force_srgb

in about:config makes the rectangle disappear. I don't have the slightest idea what is going on tho.

kloch2• 4 years ago

There are several ways colorspace metadata can be included in a PNG.

- No colorspace metadata (software should assume sRGB)

- Built-in sRGB format chunk

- gAMA chunks

- cHRM chunks

- ICC profile chunks

IMO v4 ICC profiles are the modern and best way to encode colorspace info. The problem is not all software uses any or all of these.

ffmpeg for example decodes all of these chunks but does not actually use any of it. It even assumes by default PNGs are encoded with rec.701 gamma (common for legacy video). This is why PNG->x264 conversion with ffmpeg has weird colors unless you encode the PNGs with gamma ~2.0 instead of the sRGB standard ~2.2.

mitchdoogle• 4 years ago

I'm using Firefox 99 on Windows 10. I don't see any distinguishable difference on the page, however, using the Firefox color picker on the square, I get #13fc35

Androider• 4 years ago

Firefox 99 on Linux, the square is visible. Chrome 100 on Linux, square is not visible. None of the colors match the RGB value #0cf4c7 when using a picker :/

Gimp shows a color of that hex the same as Firefox's square. The Chrome color is much paler in comparison. There's no color profile set for the monitor.

farzher• 4 years ago

wtf is the color of 0cf4c7.png ? it's different in every browser, and even when you download the file, it's again different in every program that opens it. this is not just a browser issue.

the Photos app on Windows 11 renders it as 01f4c7. almost 0 red. (although come to think of it, maybe the Windows 11 Photos app is an embedded browser, lol)

jstanley5• 4 years ago

I don't really care what the colour is, I just assume it should look the same in the page background and in the PNG.

Eric_WVGG2• 4 years 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). 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/dump...

wbobeirne• 4 years 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• 4 years ago

Unfortunately, I don't think iOS safari has webm support yet.

Eric_WVGG2• 4 years ago

Yeah but the fx guys certainly didn't have the js or css chops to make most of that work.

I think the real correct solution would have been a Lottie animation, but there was no time to train the fx guys.

Hello71• 4 years ago

setting aside whether a gif is really necessary, it was surprising to me that your gif is so large, considering it's mostly flat colors, albeit at a fairly high frame rate. running it through gifsicle -O3 takes off 1 MB, and -O3 --lossy takes off another MB. -O3 --colors 4 drops it by another 2 MB, for a total of 69% file size reduction, at the cost of some minor fringing only visible when displayed full-screen.

hombre_fatal• 4 years ago

I love loud background colors like that.

spartanatreyu• 4 years ago

I have a technique I use to get around videos that are supposed to be seamless with their backgrounds.

First I figure out which edges of the video will have website background next to them. Some video edges won't need any if the video itself is touching the side of the webpage.

Inside the video, do either or both of these two things:

a) Make the background of the video the same as the background of the website (impossible for live action, useful for product spin-arounds / pull-apart animations)

b) Place a gradient layer over the video to make the edges of the video that meet the website content blend into the website's background color. The gradient should go from transparent to the website's color.

Render out the video.

Now comes the part where people usually get frustrated. The video either doesn't blend in with the website's background, or only blends in on certain browsers. (This is due to a combination of the video losing color information when it is rendered and due to the whole web color spacing issues the Original Post goes into.

Now to fix it: Place a css/svg gradient over the <video> element itself that also goes from transparent to the website's color.

Why put the original gradient over the video?

Two reasons:

1. Depending on the css/svg gradient shape and stopping points, some browsers will render a hard edge through the gradient, allowing the border of the video to still be seen. Human eyes are great at seeing very minute changes in brightness/color when they're next to each other, especially when they're arranged in a straight line. Baking a gradient into the video itself actually helps out the css/svg gradient to hide the video's edge

2. Rendering a colored transparent gradient inside a video actually lowers the amount of colors in the final video, leading to a smaller file size and faster loading time. If the user's aren't actually going to see the original colours, there's no point rendering out the original video and all its much larger amount of color information if the user's aren't going to see it.

Example time:

Here's the last website I achieved this effect on: https://myoresearch.com/en-au

(Yes I'm aware there are some other issues with the website, but this is more to demonstrate the video effect itself)

kaichanvong• 4 years 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• 4 years 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?

3232• 4 years 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• 4 years 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• 4 years 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

I don't believe it is yet implemented in browsers, but I know Chrome at least is working on it.

est2• 4 years ago

The best color mixing I've seen in a while is this

https://github.com/scrtwpns/pigment-mixing

peanut_worm• 4 years ago

I doubt its ever going to change for compatibility reasons

jupp0r• 4 years 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?

efitz2• 4 years 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• 4 years ago

Unless you are the one implementing color rendering in web browsers, someone else is controlling your experience of color on the web.

efitz2• 4 years 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.

lisper• 4 years ago

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

bee_rider• 4 years 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• 4 years 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• 4 years 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• 4 years 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• 4 years 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• 4 years ago

Can someone explain this for a sight-impaired person?

kps• 4 years 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• 4 years 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• 4 years 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• 4 years 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/

Web color is still broken

Related Stories