Hacker News Reader

Comment by orlp | Hacker News Reader

In what way is linear black-white interpolation ugly?

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.

What I use is HSL whereby the H is in LRGB and the L is in SRGB (I forget what the S is but it’s one of the two). Very simple way of getting the best of both worlds when doing color math.

If you want to simulate light at a physical level (even as simple as two projectors shining light at the same wall) then Linear Light is correct —- it is any time when your mental model includes ‘light’… It just works.

You are right though that schemes like sRGB are a better fit for perceptual brightness. As you say the slider works the way people expect it to and you don’t need so many gray levels. 8 bit linear light shows posterization at some levels and is shaded too finely at others. If you want good results with linear light and common tools you need 16 bits of grey.

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.

Sorry but this is just your example being horribly misgenerated/some gamma being applied twice, maybe even thrice. Here is what I generated:

sRGB: https://i.imgur.com/dbn3TM6.png Lab (linear): https://i.imgur.com/dCXzbF3.png

Please download the images and view in a proper image viewer. For some reason at least on my Windows machine Google Chrome adds horrible color banding to both images.

This is my code:

    import imageio
    import numpy as np
    import colour

    quantize_with_dither = lambda im: np.clip(im * (2**8-1) + np.random.uniform(size=im.shape), 0, 2**8-1).astype(np.uint8)

    srgb_black = [0, 0, 0]
    srgb_white = [1, 1, 1]
    srgb_grad = np.linspace(srgb_black, srgb_white, 500) * np.ones((200, 1, 3))
    imageio.imwrite("srgb.tif", quantize_with_dither(srgb_grad))

    lab_black = colour.XYZ_to_Lab(colour.sRGB_to_XYZ(srgb_black))
    lab_white = colour.XYZ_to_Lab(colour.sRGB_to_XYZ(srgb_white))
    lab_grad = np.linspace(lab_black, lab_white, 500) * np.ones((200, 1, 3))
    lab_grad_in_srgb = colour.XYZ_to_sRGB(colour.Lab_to_XYZ(lab_grad))
    imageio.imwrite("lab.tif", quantize_with_dither(lab_grad_in_srgb))

I didn't trust imageio's correct handling of gamma/colorspaces so I just wrote out the raw sRGB coefficients as 8-bit TIFF and used imagemagick to convert to PNG, telling it that the input is in sRGB:

    magick convert lab.tif -set colorspace sRGB -depth 8 lab.png
    magick convert srgb.tif -set colorspace sRGB -depth 8 srgb.png

That banding is odd. I get the same issue on Windows 11 latest Chrome build. Looks fine in Windows default image viewer. These are PNG images, so there is no decompression to mangle them. The only way the two images could differ is in the way the pixels are massaged into the color space. Weird.

Lab is not linear. L predicts perceptual brightness, just like sRGB, which is probably why your two gradients are almost the same.

Gamma encoding is lin_to_srgb(c) = c*12.92 if c<=0.0031308 else 1.055*c**(1/2.4)-0.055. Since lin_to_srgb(0.214)=0.5, in a linear ramp, the middle gray (808080) pixel should occur about 20% of the way through.

I've generated my own version of this (i just happened to be working on something that needed gamma correct rendering)

https://i.imgur.com/jeM4RCu.png

       top: linear_to_srgb(x)
    middle: x
    bottom: srgb_to_linear(x)

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.

Reply on news.ycombinator.com