HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Computer Color is Broken

minutephysics4 HN recommenders · recommended in 5 months, 2015-2026
YouTube
4.3M views · 11 years ago · explainer · evergreen

MinutePhysics explains that computers store brightness nonlinearly, so blurring and blending colors in raw RGB gives wrong, dark results. It shows why mixed colors, such as in gradients, look off.

HN cites it as the accessible go-to explanation of gamma and color blending errors in image programs.

Computer graphics & renderingGraphic design & typography#gammacorrection#srgb#colorblending#gradients#imageprocessing

12 comments from Hacker News

@joedrago2026 · in “What every coder should know about Gamma Correction”

For those interested in this topic, I found minutephysics' treatment of this subject to be really pleasant and easy to grok. I had a talk I gave at work once or twice discussing color conversion and I would play a 90 second snippet from this (attributed appropriately) as it would very quickly crash course people on the reasoning behind an EOTF in a really cute and layman's terms kind of way: ▶ this video

Strongly recommendsView on HN
@quietbritishjim2026 · in “Rendering the Visible Spectrum”

> The final piece of the puzzle is gamma correction. Applying gamma correction to these RGB coordinates produces a new set of values which we call (R', G', B') that are related to the original by a transfer function 6 ... The reason this is done is to account for how our eyes perceive brightness nonlinearly. We can distinguish changes in dark shades much more easily than light shades because a linear increase R in has much more of a relative effect when R is small. Switching to (R', G', B') therefore provides more resolution in dark regions of the image where the eye is more sensitive to variations in brightness. I'm surprised that this isn't mentioned much earlier and much more prominently. Instead, it's practically a footnote. Maybe I'm mistaken, but I would bet 90% of the awkwardness in the very first image is from averaging these values (R', G', B') for the gradients rather than switching to the true linear values, averaging, then converting back. This classic MinutePhysics video covers it well: ▶ this video

RecommendsView on HN
@incrudible2024 · in “Polychromatic Pixels”

I am not saying you can use the exact same math as in an image manipulation program, these work with different assumptions. Mixing colors in those is usually not correct anyway. ▶ this video I am saying you can think of subpixels, which already exist, as a form of dithering. Most displays use just three primaries for subpixels - red, green and blue. Their arrangement is fixed, but that is not a limitation of this new technology.

CitesView on HN
@circlingthesun2022 · in “CSS Gradients that avoid the “gray dead zone””

There is a related video by minute physics about how the RGB color space stores the square root of the brightness of each color channel, because human color perception is roughly logarithmic. Bad color blending is therefore pretty commonplace because it uses the average of square roots instead of the square root of the average of the original brightness values. See: ▶ this video

CitesView on HN
@Akronymus2021 · in “The worst volume control UI in the world (2017)”

>This is in the same category of error as most programmers thinking that sRGB uses a linear light model. They try to do arithmetic like blending or blurring on the raw image data this inevitably does the wrong thing. Relevant: ▶ this video

CitesView on HN
@fireattack2021 · in “Ditherpunk: The article I wish I had about monochrome image dithering”

I misunderstood what you mean. Please ignore. On a side note, by colorspace I mainly meant that we can just stick with one with ultra-wide gamut. There are indeed other reasons to have different color spaces. (Below is my original comment for transparency.) ------------- Gamma isn't really about CRT; or I should say, they're two different things. The fact CRT has a somewhat physical "gamma" (light intensity varies nonlinearly with the voltage) is likely just a coincidence with the gamma we're talking here. The reason gamma is used in sRGB is because human eyes are more sensitive to changes in darker area, i.e. if the light intensity changes linearly, it feels more "jumpy" in darker end (which causes perceptible bandings). This is especially an issue with lower color depth. To solve this, we invented gamma space to give darker end more bits/intensity intervals to smooth the perceptive brightness. >it's not needed to understand the difference between linear and non-linear colorspaces It absolutely should, since any gamma space would have problem with "averaging", as explained by the GP. Actually, it's so bad that almost all the image editing/representing tasks we have today are doing it wrong (resizing, blurring, mixing..). This topic has been discussed extensively on Internet, so I'm not going to go into detail too much. A good start point is [1][2]. [1] ▶ this video [2] link

RecommendsView on HN
@quietbritishjim2020 · in “Brown: color is weird [video]”

If we're on the "watch this YouTube video if you work with colours" train, here's a great explanation of why gradients usually have a dark band in the middle, on the MinutePhysics channel: ▶ this video In short: the RBG values in an image are not actually the intensity of light, but some nonlinear function of intensity. To do a weighted average of two colours you need to first undo that nonlinearity, then do the averaging, then reapply the function. Most software doesn't do that so the colours end up wrong. This also applies to resizing images.

RecommendsView on HN
@vanderZwan2019 · in “Unveiling the first-ever image of a black hole [video]”

Mind you, that's a JPG you are editing, so in the 8 bit sRGB color space. That means manipulations can lead to errors and illusions due to the color space being non-linear and clipped[0]. The original data was likely linear and at a much higher precision. If the source was a 16 bit linear grayscale PNG for example you could be much more assured you're not seeing the effects of JPG compression and things that were actually measured. EDIT: Found better sources: 16-bit sRGB PNG: link 180 MiB original TIFF: link [0] ▶ this video

CitesView on HN
@sometime2019 · in “Gamma error in picture scaling”

The same phenomenon also applies to color blending. In a modern context this phenomenon is especially visible in UI elements that blur the background: Up until recently many UIs did not get the blurring right, resulting in greyish dark spots between different colors. I think CSS blurring in most browsers still gets it wrong. ▶ this video (Computer Color is Broken, MinutePhysics)

CitesView on HN
@mxfh2016 · in “What every coder should know about gamma”

Good reminder about these persisting blending issues in the linear interpretation of RGB values, which was well explained to non-coders as well here in a quite popular MinutePhysics video: ▶ this video As others commented the gamma scaling issues seem even more relevant. Just please, don't use RGB color space for generating gradients. In fact, it's ill fitted for most operations concerning the perception of colors as is. chroma.js : link D3 : link Interesting excursion: historically the default viewing gammas seem to have lowered, because broadcasting defaulted to dimly lit rooms, while today's ubiquitous displays are usually in brighter environments. link

RecommendsView on HN
@qwertyuiop9242016 · in “What every coder should know about gamma”

I'd already seen most of this in a video (courtesy of Henry, aka MinutePhysics, ▶ this video ), but it was nice to see a programmer-oriented explanation, nonetheless.

CitesView on HN
@anon42015 · in “Mandelbrot Set with SIMD Intrinsics”

I'm calling it pedantic, because as far as I can see nobody cares outside of people doing movie VFX and the like, where it is actually really really important that you get it right. Your GUI for example doesn't care - elements are blended assuming a linear colourspace, which means that all font rendering is just slightly off. Even Apple don't care to make their blur effects correct - see ▶ this video . Even photoshop doesn't do it correctly by default. Almost everybody is perfectly happy treating the values as linear colour intensity. The bottom line is that sRGB is hideously hard to work in. You really want to only use it for storage and only if you really must. It's an optimisation to allow you better range on the low end, at the expense of the high intensity end, to match human colour vision. However, that means using 48bit RGB and that's not a price everyone wants to pay. People who do professional graphics work simply use 32bit floats per colour channel - 128bit RGBA, or even 192bit RGBRaGaBa (separate alpha for each channel) and have workstations with 32 or 64GB of RAM. However, your normal everyday GUI application needs to run on a phone with about 1GB of RAM. Or going back farther, it has to run on an Intel 486 with 16MB of RAM. That kind of explains where the culture of "just treat it as linear, it's not that wrong" came from :) .

CriticalView on HN
The Weird World in RGB22:19

The Weird World in RGB

Technology Connections
2.7M views • 7 years ago
Brown; color is weird21:15

Brown; color is weird

Technology Connections
5.3M views • 6 years ago
A Better Default Colormap for Matplotlib | SciPy 2015 | Nathaniel Smith and Stéfan van der Walt19:09

A Better Default Colormap for Matplotlib | SciPy 2015 | Nathaniel Smith and Stéfan van der Walt

Enthought
177K views • 11 years ago
3D Gaussian Splatting - Why Graphics Will Never Be The Same2:12

3D Gaussian Splatting - Why Graphics Will Never Be The Same

IndividualKex
2M views • 3 years ago
CD / Color7:00

CD / Color

Captain Disillusion
2.9M views • 6 years ago
Eulerian Video Magnification4:28

Eulerian Video Magnification

Miki Rubinstein
788K views • 14 years ago
I can't show you how pink this pink is.3:52

I can't show you how pink this pink is.

Tom Scott
9.7M views • 9 years ago
Faking RTX Global Illumination vs. RTX | 100% Ray-Traced Game, Pt 127:27

Faking RTX Global Illumination vs. RTX | 100% Ray-Traced Game, Pt 1

Gamers Nexus
260K views • 7 years ago
SYMBOLICS S-PACKAGES 3D GRAPHICS AND ANIMATION DEMO29:16

SYMBOLICS S-PACKAGES 3D GRAPHICS AND ANIMATION DEMO

Red Martian
14K views • 13 years ago
3D Gaussian Splatting! - Computerphile17:40

3D Gaussian Splatting! - Computerphile

Computerphile
273K views • 2 years ago
I wrote a Raytracer for DOS, 16 VGA colors15:00

I wrote a Raytracer for DOS, 16 VGA colors

Bisqwit
905K views • 15 years ago
Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]3:53:11

Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]

Freya Holmér
1.9M views • 5 years ago
Refterm v2 - Resource usage, binary splat, glyph sizing, and more29:51

Refterm v2 - Resource usage, binary splat, glyph sizing, and more

Molly Rocket
68K views • 5 years ago
CGA Graphics - Not as bad as you thought!11:27

CGA Graphics - Not as bad as you thought!

The 8-Bit Guy
2.4M views • 10 years ago
Disney's Practical Guide to Path Tracing9:32

Disney's Practical Guide to Path Tracing

Walt Disney Animation Studios
914K views • 10 years ago
Why Snow and Confetti Ruin YouTube Video Quality4:20

Why Snow and Confetti Ruin YouTube Video Quality

Tom Scott
10.4M views • 10 years ago
ShaderToy LiveCoding - The Drive Home - 1. Basic Setup15:39

ShaderToy LiveCoding - The Drive Home - 1. Basic Setup

The Art of Code
28K views • 9 years ago
This game DISAPPEARS if you pause it!3:58

This game DISAPPEARS if you pause it!

Branta Games
687K views • 1 year ago
Exclusive: Metro Exodus Enhanced Edition Analysis - The First Triple-A Game Built Around Ray Tracing40:45

Exclusive: Metro Exodus Enhanced Edition Analysis - The First Triple-A Game Built Around Ray Tracing

Digital Foundry
915K views • 5 years ago
Brigade 3.0 preview - Real-time path tracing2:13

Brigade 3.0 preview - Real-time path tracing

icelaglace
439K views • 12 years ago