4 ms·

This article seems to give RGB a bad rap but I think it makes the most sense for gradients. I wouldn't want a yellow to blue gradient to cycle through a (partia

by jrowen 5y ago

This article seems to give RGB a bad rap but I think it makes the most sense for gradients. I wouldn't want a yellow to blue gradient to cycle through a (partial) rainbow of colors. But I also wouldn't really ever choose to make a pure yellow to pure blue gradient. Most pleasing gradients you see in the wild use colors that are more similar to begin with, so it's a bit of a strawman. It's really just about carefully choosing your start and end (and optionally intermediate) colors.

jahewson 5y ago
I agree that hue rotation makes for some weird gradients. Linear RGB is an acceptable color space for gradients, because gamma correction is accounted for. But performing a linear interpolation in sRGB or the like leads to a linear gradient which appears to ramp steeply from one color stop to the next. However, if you compare Linear RGB with CIELAB then you'll notice the same thing, the CIELAB gradients look smoother as linear movement through the color space more closely mirrors linear movement through our human perceptual system.
- mark-r 5y ago
  LAB is good but not great. If you do a gradient from pure green to pure blue, you'll see some purples and other color oddities in the mix.
deleted 5y ago
[deleted]
steve_adams_86 5y ago
I think this is for those cases where you'd like to create a striking gradient but RBG falls kind of flat. For a lot of us it wouldn't be apparent why that is, just disappointing. This tool remedies that by giving you a vibrant and striking gradient regardless of what you feed it. I do agree about the rainbow of colours though. As someone who understands how RGB works and has worked with colour a lot for decades, this tool is kind of un-intuitive at a glance. That's probably alright though. I can continue hand-crafting gradients because I know how to. Most people using a generator likely don't know how to. Otherwise it's also a great exercise in learning about and then teaching these things, which Josh is great at.
nightpool 5y ago
This comment sheds a little bit of insight here: https://news.ycombinator.com/item?id=29895421 https://news.ycombinator.com/item?id=29895421. The original article chose to always go "clockwise" around the color wheel, picking up lots of different colors and giving the appearance of a rainbow, instead of taking the shorter, more naturalistic route of blending through teal & green.
meetups323 5y ago
I agree re HSL, HCL, and HSV, however the LAB gradients do tend to look nicer than RGB ones, without passing through random other hues in the middle.
- mcv 5y ago
  I know nothing about gradients, but wouldn't dithering provide the best results? That way you're truly mixing those two colours and not going through completely different colours based on some arbitrary numerical representation of the colours.
  - meetups323 5y ago
    Only if you want a dithered look, which oftentimes you don't.
    - mcv 5y ago
      I guess it depends on the size of your pixels. But as long as your pixels are small enough, I think this is the only way to have a gradient go straight from one colour to an opposite colour without going through either grey or a multitude of other colours.
      - jakear 5y ago
        Pixels are much larger than imperceptible, even on "retina" devices: https://jacksonkearl.github.io/canvas-thing/ https://jacksonkearl.github.io/canvas-thing/
mkj 5y ago
RGB mixing doesn't seem very natural though. In physical reality you do end up with that rainbow, a random example mixing paints https://www.justpaint.org/wp-content/uploads/2015/11/JP26.pdf https://www.justpaint.org/wp-content/uploads/2015/11/JP26.pd...
- beardyw 5y ago
  Subtractive colour mixing in pigments is way more complex than the light on a monitor. Each pigment has its own distribution of absorbed and reflected wavelengths so mixing any two colours is mostly try and see in practice.
eyelidlessness 5y ago
Ultimately it’s about perceptual color versus actual light. A red/blue gradient should be almost entirely transparent (ahem, grey if that’s what you’re getting from lack of data in RGB), but it too will “cycle through” and produce colors that don’t exist between red and blue. You’re expressing preference for a particular substitution approach that makes sense to you, which is perfectly fine as a preference but that’s all it is. Edit: or it will produce the full spectrum between red and blue but that’s obviously not your preference.
fsloth 5y ago
It's actually also about the interpolation path as well. Creating gradients in 3 component colorspaces is totally analogous to creating interpolation splines in 3d euclidean coordinates. The fixed points define only the end points of the splines. The space between the end points corresponds to the color value along the interpolation curve. If we are in an rgb cube, we notice the "gray zone" is along the diagonal from (0,0,0 to 1,1,1). If we take two colors opposite of this diagonal (say color_a={r=0.5, g=0.5, b=0.0} and color_b = {0.5,0.5,1 0} we notice if we linearly interpolate we go through gray (0.5,0.5,0.5) in the middle. If in stead we move along a curved path that avoids the diagonal, trying to maintain the saturation we get a much nicer result. This "curved path of roughly equal saturation" is easier to define in a colorspace such as HSV where the saturation is one of the spatial coordinates. But as I always say, there is no theoretically "correct" way to define a gradient, only techniques optimized for some specific use case. My personal opinion is that generally linear interpolation in RGB results in the least satisfying gradients but that is just my _taste_.
alkonaut 5y ago
I was expecting the article to eventually explain how to make a gradient between two colors, without passing neither anything looking like "third hue" nor gray. This is perhaps not possible in theory, but just adjusting the gradient curve so that the effect is minimized should be possible.

by jrowen 5y ago

jahewson 5y ago

I agree that hue rotation makes for some weird gradients. Linear RGB is an acceptable color space for gradients, because gamma correction is accounted for. But performing a linear interpolation in sRGB or the like leads to a linear gradient which appears to ramp steeply from one color stop to the next. However, if you compare Linear RGB with CIELAB then you'll notice the same thing, the CIELAB gradients look smoother as linear movement through the color space more closely mirrors linear movement through our human perceptual system.

mark-r 5y ago
LAB is good but not great. If you do a gradient from pure green to pure blue, you'll see some purples and other color oddities in the mix.

deleted 5y ago

[deleted]

steve_adams_86 5y ago

I think this is for those cases where you'd like to create a striking gradient but RBG falls kind of flat. For a lot of us it wouldn't be apparent why that is, just disappointing. This tool remedies that by giving you a vibrant and striking gradient regardless of what you feed it. I do agree about the rainbow of colours though. As someone who understands how RGB works and has worked with colour a lot for decades, this tool is kind of un-intuitive at a glance. That's probably alright though. I can continue hand-crafting gradients because I know how to. Most people using a generator likely don't know how to. Otherwise it's also a great exercise in learning about and then teaching these things, which Josh is great at.

nightpool 5y ago

This comment sheds a little bit of insight here: https://news.ycombinator.com/item?id=29895421 https://news.ycombinator.com/item?id=29895421. The original article chose to always go "clockwise" around the color wheel, picking up lots of different colors and giving the appearance of a rainbow, instead of taking the shorter, more naturalistic route of blending through teal & green.

meetups323 5y ago

I agree re HSL, HCL, and HSV, however the LAB gradients do tend to look nicer than RGB ones, without passing through random other hues in the middle.

mcv 5y ago
I know nothing about gradients, but wouldn't dithering provide the best results? That way you're truly mixing those two colours and not going through completely different colours based on some arbitrary numerical representation of the colours.
- meetups323 5y ago
  Only if you want a dithered look, which oftentimes you don't.
  - mcv 5y ago
    I guess it depends on the size of your pixels. But as long as your pixels are small enough, I think this is the only way to have a gradient go straight from one colour to an opposite colour without going through either grey or a multitude of other colours.
    - jakear 5y ago
      Pixels are much larger than imperceptible, even on "retina" devices: https://jacksonkearl.github.io/canvas-thing/ https://jacksonkearl.github.io/canvas-thing/

mkj 5y ago

RGB mixing doesn't seem very natural though. In physical reality you do end up with that rainbow, a random example mixing paints https://www.justpaint.org/wp-content/uploads/2015/11/JP26.pdf https://www.justpaint.org/wp-content/uploads/2015/11/JP26.pd...

beardyw 5y ago
Subtractive colour mixing in pigments is way more complex than the light on a monitor. Each pigment has its own distribution of absorbed and reflected wavelengths so mixing any two colours is mostly try and see in practice.

eyelidlessness 5y ago

Ultimately it’s about perceptual color versus actual light. A red/blue gradient should be almost entirely transparent (ahem, grey if that’s what you’re getting from lack of data in RGB), but it too will “cycle through” and produce colors that don’t exist between red and blue. You’re expressing preference for a particular substitution approach that makes sense to you, which is perfectly fine as a preference but that’s all it is. Edit: or it will produce the full spectrum between red and blue but that’s obviously not your preference.

fsloth 5y ago

It's actually also about the interpolation path as well. Creating gradients in 3 component colorspaces is totally analogous to creating interpolation splines in 3d euclidean coordinates. The fixed points define only the end points of the splines. The space between the end points corresponds to the color value along the interpolation curve. If we are in an rgb cube, we notice the "gray zone" is along the diagonal from (0,0,0 to 1,1,1). If we take two colors opposite of this diagonal (say color_a={r=0.5, g=0.5, b=0.0} and color_b = {0.5,0.5,1 0} we notice if we linearly interpolate we go through gray (0.5,0.5,0.5) in the middle. If in stead we move along a curved path that avoids the diagonal, trying to maintain the saturation we get a much nicer result. This "curved path of roughly equal saturation" is easier to define in a colorspace such as HSV where the saturation is one of the spatial coordinates. But as I always say, there is no theoretically "correct" way to define a gradient, only techniques optimized for some specific use case. My personal opinion is that generally linear interpolation in RGB results in the least satisfying gradients but that is just my _taste_.

alkonaut 5y ago

I was expecting the article to eventually explain how to make a gradient between two colors, without passing neither anything looking like "third hue" nor gray. This is perhaps not possible in theory, but just adjusting the gradient curve so that the effect is minimized should be possible.