2

Is there any way to draw a hue ramp that appears visually smooth?

For example, take a look at the following image:

Hue ramp from Wikipedia On my sRGB calibrated monitor, I can quite clearly see what appears to be triangular "peaks" at 60, 180, and 300°. Meanwhile, the valleys of red, green, and blue in-between don't seem to change that much- for example, the difference between 110° and 130° is very little visually speaking.

What I'd like to do is figure out a way to generate a hue ramp that looks much more smooth, where the colours seem to blend into each other more seamlessly.

Is there any way to do that? It doesn't need to be a linear hue ramp, so I don't really care where the colours actually land up as long as the beginning and end of the ramp are red (0°/360°).

CMPXCHG8B
  • 497
  • 3
  • 15
  • When dealing with visual information, it is important to understand that not only color emitters (displays, paper, etc.) emit colors differently, but also that human eyes perceive colors differently. Some people might not see any peaks on your rainbow, or see them in different places. For edge cases, see [Wikipedia: Color blindness](https://en.wikipedia.org/wiki/Color_blindness). See [Wikipedia: Color vision](https://en.wikipedia.org/wiki/Color_vision) for introduction to physiology of vision – Ivan Aksamentov - Drop Sep 05 '16 at 09:03
  • That said, your rainbow is perfectly "flat" numerically (saturation and value are constant), but your eyeballs and brain perceive it non-uniformly. Green looks flat because different wavelengths of green been perceived as the same color. Every human being has an individual set of parameters for that perception, that is why it's impossible to find a "flat" spectrum that works for everyone. There is entire science (ophthalmology) that is far more complicated than a simple algorithm you'd want to find. – Ivan Aksamentov - Drop Sep 05 '16 at 09:16
  • In the ideal world, you would need to use a uniform colourspace to generate your ramp, something like CAM02-UCS or alike, Viridis, the perceptually uniform of Matplotlib was generated this way. An non involved alternative would be to run a large horizontal gaussian kernel on your ramp after generating it, it will smooth it: http://imgur.com/Me1rlqM – Kel Solaar Sep 06 '16 at 08:25

2 Answers2

4

If you read up on the HCL colorspace (Wikipedia), you will find it better matches the human perception of colour. It is also discussed in Anthony Thyssen's excellent notes here.

If I make a hue ramp in HSL colorspace, with this ImageMagick command at the Terminal:

convert -size 100x512 gradient: -rotate 90 \( +clone -fx "1" \) \( +clone -fx "0.5" \) -combine -set colorspace HSL result.png

I get this:

enter image description here

Whereas, if I build that in HCL colorspace, like this:

convert -size 100x512 gradient: -rotate 90 \( +clone -fx "1" \) \( +clone -fx "0.5" \) -combine -set colorspace HCL result.png

I get this much smoother ramp:

enter image description here

The ImageMagick commands above just create a black-white gradient and use that as the H channel, then clone that and set it to "1" to make the C channel and clone it again and set it to "0.5" to make the L channel. The three channels are then combined and saved as sRGB in the output file.

Mark Setchell
  • 191,897
  • 31
  • 273
  • 432
0

This can easily be done in a different color space:

The HSV color space represents a value as a triplet hue, saturation, and value. By keeping saturation and value constant, while going over the hue range, you get the requested bar.

Both wikipedia and Algorithm to convert RGB to HSV and HSV to RGB in range 0-255 for both explains how to convert between hsv and traditional rgb (red, green, blue) triplets.

Community
  • 1
  • 1
Lanting
  • 3,060
  • 12
  • 28
  • I've tried that, and I get the same results as the picture I attached, which is what I don't want... I'm looking for an algorithm that creates a smoother appearance, not necessarily one that generates a linear hue ramp. – CMPXCHG8B Sep 05 '16 at 09:03