# Can anyone explain how HSL colours are supposed to work on a gradient fill?

## Recommended Posts

I don’t normally use HSL colours so this is a new area for me.

In my attached image I have two rectangles, each with a horizontal linear gradient fill.

The top rectangle gradient goes from RGB 0, 0, 0 on the left to RGB 255, 0, 0 on the right and that looks as I would expect (the colour at the middle point is RGB 128, 0, 0, as can be seen in the little square below it).

However, the bottom rectangle gradient goes from HSL 0, 100, 50 on the left to HSL 360, 100, 50 on the right but I don’t get the colours in-between the two as I can see in the “H” slider of the Colour Chooser. I would have expected – possibly naively – that the middle point of the gradient would be coloured as can be seen in the little square underneath (manually chosen colour), and I would get all of the other colours too, but it’s not.

Am I doing something wrong? Is there some fundamental thing which I’m not understanding about HSL?
I did a little searching in the forums but didn’t notice anything relevant. Some related questions but no answers that explained it (to me).

(I’ve also attached the document for people to experiment with.)

##### Share on other sites
14 minutes ago, GarryP said:

HSL 0, 100, 50 on the left to HSL 360, 100, 50 on the right but I don’t get the colours in-between the two

Hue = 0 is identical to Hue = 360, so there are no other ‘colours in-between the two’.

Alfred
Affinity Designer/Photo/Publisher for Windows • Windows 10 Home (4th gen Core i3 CPU)

##### Share on other sites

I can understand that, up to a point, but even when I change the right-hand stop to, for example, HSL 340, 100, 0, I only get a gradient between two colours and not the ‘whole rainbow’.
In a gradient fill between RGB 0,0,0 and RGB 255,0,0 the R value varies in a linear fashion from 0 to 255.
However, in a gradient fill between HSL 0,100,50 and HSL 340,100,50 the H value does not seem to vary in a linear fashion between 0 and 340.
I don’t understand why that is.
[Interestingly, if I add a tab stop at the centre of a gradient fill from HSL 0,100,50 to HSL 340,100,50 I get HSL 350,100,50, which seems even stranger, see attached image. (I can kind of see why but that’s a bit of a side note.)]
So, I think my question mutates into something like: “Is it the H value which is supposed to be varying across the gradient fill, or something else?”

##### Share on other sites
11 minutes ago, GarryP said:

[Interestingly, if I add a tab stop at the centre of a gradient fill from HSL 0,100,50 to HSL 340,100,50 I get HSL 350,100,50, which seems even stranger, see attached image. (I can kind of see why but that’s a bit of a side note.)]

Side note or not, I can see exactly why (and it doesn’t seem at all strange to me).

14 minutes ago, GarryP said:

So, I think my question mutates into something like: “Is it the H value which is supposed to be varying across the gradient fill, or something else?”

I certainly can’t fault your logic about expecting the H value to vary, particularly when neither the S value nor the L value does. I wonder what the ‘something else’ might be.

Alfred
Affinity Designer/Photo/Publisher for Windows • Windows 10 Home (4th gen Core i3 CPU)

##### Share on other sites

Hopefully a friendly developer will chance upon this question and give a good "from the horse's mouth" explanation.
If it’s how it’s supposed to be then that’s fine; I’d just prefer to know why it works the way it does so I’m not just bumbling around without a clue (or quite as much as usual).

##### Share on other sites

i suppose color values just get translated to RGB and then the ramp is done as normally between the RGB values.

##### Share on other sites

Garry, you should probably rephrase your question like this:

• What is the algorithm for the interpolation of colour values between gradient stops, if these stops are defined in HSL?

For you are asking how the intermediate colour values between the values of the gradient stops are calculated. And that’s basically an interpolation problem😀

##### Share on other sites
1 minute ago, Lagarto said:

i suppose color values just get translated to RGB and then the ramp is done as normally between the RGB values.

It does rather look that way, doesn’t it! So now we can all go away feeling somewhat cheated....

Alfred
Affinity Designer/Photo/Publisher for Windows • Windows 10 Home (4th gen Core i3 CPU)

##### Share on other sites
9 minutes ago, Lagarto said:

i suppose color values just get translated to RGB and then the ramp is done as normally between the RGB values.

Yes, it looks like that. The article I linked above provides some information on the difficulties of the problem.

##### Share on other sites

If that’s what is happening then I can live with it.
Since we can set gradient stops via a mix of RGB/HSL/CMYK values in the same gradient I guess the software has to convert them all to one type or other to do any kind of interpolation between them. Ho hum.

If it is what’s happening then I guess this could have further consequences that I probably don’t understand.
E.g. How do you do interpolation from a CMYK colour through an RGB colour and back to a CMYK colour when a mid-point colour is out of gamut of either CMYK or RGB? (I don’t really know what all these things are but I remember reading lots of stuff about it long ago that was way over my head.)

Anyway, thanks for the explanations everyone. Not the answer I wanted but an answer nonetheless, and that's fine with me.

##### Share on other sites

For what it's worth, in CorelDRAW you can specify which direction around the color wheel you want the hue interpolated, instead of always getting the "shortest" path.  That lets you force a full-circle interpolation from 0 to 360 in this situation.

As a practical matter, you can add one or more intermediate keys to the gradient, to force it to move around the colorwheel.  Not as convenient to manage, by any means, but it would let you get the desired effect.

##### Share on other sites

A good point! I had forgotten that this can be done also with regular gradients (or “fountain fills” as they are called in CorelDRAW), and not just with the blend effect where this kind of gradation can be applied through a chain of separate objects, like here on top where first a linear and then "counter-clockwise" hue based gradation is applied between the red end objects. So in the selected object the same effect is applied on a single object (while the topmost bar has a color-stop-based regular gradation defined):

Even if the change is applied along logical axis rather than color components (as when using linear RGB or CMYK scales), the effect creates similar gradations as when using linear scales and equivalent stop colors.

These effects can be applied using any color model, so even if the gradation is created on logical axis like Hue, Lightness, Saturation (the Corel equivalent to HSL), like here keeping the lightness value constant and changing from zero to full saturation across the full hue scale, the same effect can be created using RGB or CMYK values and using the blend direction control:

Here the same gradation is defined using CMYK values and then applying "Clockwise Color Blend".

##### Share on other sites
17 hours ago, A_B_C said:

The article I linked above provides some information on the difficulties of the problem.

A big part of the problem is that human color perception is inherently nonlinear. In fact, because it is a dynamic process in which the brain, photoreceptors of the eye, & all the muscles that determine what we focus on work together as a system over time to build up the image 'in the mind's eye' it would be impossible to duplicate that with any static color model.

Not even the LCH color space is 'big' enough to do that.

Affinity Photo 1.8.4, Affinity Designer 1.8.4, Affinity Publisher 1.8.4;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 40GB RAM; macOS 10.15.6
Affinity Photo

##### Share on other sites
12 hours ago, R C-R said:

A big part of the problem is that human color perception is inherently nonlinear.

Human color perception is a fascinating thing.  Despite our fondness for the "color wheel" and "complementary colors", there is no cycle and no inverses among the wavelengths/frequences of single-colored light that we respond to as having various hues.  While we do have (with some genetic exceptions) three types of color sensors (as well as more-light-sensitive-while-color-insensitive cells) whose responses generally center on red, green and blue, our color perceptual system is more accurately modeled as a red-green antagonist and a yellow-blue antagonist system.  That in fact is the basis for the Lab color system (and its close relatives such as the LCH color system).

Many animals have sets of color sensors that are very unlike those of humans, and if we ever encounter aliens with whom we can (eventually) hold a discussion, you can be sure that there will be very little agreement on color once we get beyond the purely physical parameters of light wavelengths and spectral distribution.  There is nothing intrinsically "correct" about red, green and blue being "primary" colors, nor about hues arranging themselves on a 'color wheel".  These are purely artifacts of human color perception, and different organisms will perceive the same physical phenomena in different ways.

The entire topic of metamerism is due to the physics of convolving spectral distributions of illuminance and reflectance (resulting in yet another spectral distribution) and the biology of having our brains summarize the whole complex result as a single hue.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×

×

• #### Affinity

×
• Create New...