Comment by zck | Hacker News Reader

Comment by zck | Hacker News Reader

Parent Full thread

> You could do better by knowingly tuning RGB values—or, even easier, HSV.

Yes, I've been doing generative art (e.g., https://i.redd.it/1tuvtfuwsfz11.png, https://i.redd.it/ymg1ix4t8qu01.png), and one of the challenges has been learning to think about colors differently. At the beginning, I would add a bunch of colors randomly to the art. Recently, I've learned some things about what makes colors look good together.

Basically, colors have three "axes": hue (is the color red? blue? yellow? green? purple? etc), saturation (how _much_ of the hue is there? low (but not 0) means pastel; high means neon), and brightness (low is black, high is bright). Play around with the axes here: https://codepen.io/HunorMarton/details/eWvewo (not mine)

If you're going to have different colors that conceptually are on the same level (e.g., four colors for tiles in a grid; three colors for different generated trees), keep two of the axes the same, and vary the other. You can see one example I've done (https://imgur.com/dFGu9Wg) where I vary the hue, but keep the saturation and brightness the same. In another example (https://i.redd.it/ymg1ix4t8qu01.png), I believe there are two colors, but each one keeps the hue the same and I vary the brightness.

> Basically, colors have three "axes": hue (is the color red? blue? yellow? green? purple? etc), saturation (how _much_ of the hue is there? low (but not 0) means pastel; high means neon), and brightness (low is black, high is bright).

Not quite. Or, to be more accurate, the naive HSV is a poor approximation of the perception process.

The visual process is dominated by a luminance scale--the perceived amount of total light. Not all wavelengths contribute equally to it (which is where HSV goes wrong). L is devoid of color information; grayscale images would only have an L channel. Then there is hue, which is essentially a mix of red-versus-green and yellow-versus-blue but is generally described as an angle. There is also a colorfulness property, which is roughly how much the spectrum departs from a flat spectrum.

Except the visual process is more complicated: these values are both considered in absolute and relative terms. A grey that's surrounded by dark greys looks lighter than if it were surrounded by light greys. So you can't look at a color in isolation, you have to consider its context; CIECAM maps colors not to 3 dimensions but to 6 dimensions. This makes accurately mapping a numeric range to colors very difficult.

Finally, there's an added complication when trying to represent colors of physical objects rather than computer screens: there's a difference between specular and diffuse reflections.

I wonder how does human perception of contrast plays into this, because it varies quite bit with the hue, and HSV doesn't capture that.

Correct! RGB and HSV do not capture how bright colors look to humans, or the contrast that colors appear to have. And the discrepancies are pretty major. This is fixed by LAB space:

https://en.wikipedia.org/wiki/CIELAB_color_space

I like your art. Have a gallery anywhere?

Thanks! I don't right now, but I post a lot of my stuff on https://www.reddit.com/r/generative/, or my twitter account: https://twitter.com/zckzck

Reply on news.ycombinator.com