Hue of a Grayscale Tone in gradients?

[SoftMoonWebWare]

What is the hue of a grayscale tone? Typically it does not matter. What about gradients?

gradient(in HSL, hsl(34deg, 50%, 20%), hsl(78deg, 0%, 70%), hsl(20deg, 80%, 50%))

Should this gradient go from a yellowish-orange hue to a light-green hue as it also grades to a grayscale tone? And then from that light-green hue back though yellowish-orange to reddish-orange?
I say yes.

But what if I don't want to do that. I only want to grade to grayscale without changing the hue. I need to create a double-stop in the middle:

gradient(in HSL, hsl(34deg, 50%, 20%), hsl(34deg, 0%, 70%) 50%, hsl(20deg, 0%, 70%) 50%, hsl(20deg, 80%, 50%))

More typing ... less readability. If I am using "relative" color-stops (I don't want to define the color-stop value), now Imay have to define that value for (almost) every stop.

Or I could grade through the RGB color-space, but then I cant add more color-stops and grade though hues....

So in my projects I use hue=360deg for "true grayscale" tones. No other value that "converts" to 360deg is similar, so 0deg and 720deg are considered "hued grayscale" for gradients.

Is there a way with CSS to specify this? Should there be? Or are we stuck with bloated gradient specs?

[facelessuser]

1. Just use none instead of the 78deg.
2. Use the the non-comma form of HSL so you can use none without error linear-gradient(in HSL, hsl(34deg 50% 20%), hsl(none 0% 70%), hsl(20deg 80% 50%)).

Some browsers may treat the hue as powerless if chroma is zero, so there will be no difference in this case. I believe this requirement is part of the CSS spec.

A color library may not enforce such specifics to give the user control and choice. It may be that Color.js though will conform to CSS expectations in the future and force such logic when chroma is zero or near zero, but I cannot speak to that for certain as I am not the decision maker here.

[SoftMoonWebWare]

AHHH ... none! Perfect.

But what about a "hued gray"? If the chroma is 0% and the hue is nullified by the browser by specs, then you can't have a "hued gray" in a gradient.
Y'all say this project is by the creators of the CSS specs. So this is the question, perhaps the idea?, that I put to them, as well as the project contributors. Nice to know how the specs are actually going. MDN's website barely shows a single example of grading "through" a specific color-space, not even mentioning it in the text. Nothing talks about hues in gray-tones that I have found. Trying to keep up with what is happening ..... but docs are not produced fast enough.

Seems to me a gradient that goes through a rainbow of colors while also becoming less and less chromatic to a gray-tone would be a commonly useful idea. I missed "none" for "true-gray" ..... am I missing something else here ? Can you create a gradient like I describe here using CSS specs? Or could they be expanded to do so?

I guess "you" or even "y'all" don't make the final decisions with CSS specs or what browsers do with them, but maybe y'all have influence.

Aloha!

[facelessuser]

Well, if there is no chroma, the hue value is meaningless. But if you are constructing values to behave a certain way, then you may care about the value regardless of chroma being zero.

Seems to me a gradient that goes through a rainbow of colors while also becoming less and less chromatic to a gray-tone would be a commonly useful idea. I missed "none" for "true-gray" ..... am I missing something else here ? Can you create a gradient like I describe here using CSS specs? Or could they be expanded to do so?

As I mentioned earlier, from a library perspective, I'd prefer the user explicitly specify a hue when they mean it, but CSS have their reasons for doing what they do and I'm not here to argue about it. Color.js may follow this (in the future) as the creators of this library are also the spec writers, but maybe they will make it an optional feature as well. I guess we'll have to wait and see 🙂.

As for how to make gray hues count in CSS browsers that force the hue to be powerless, I'd recommend using a small saturation/chroma above the browser's threshold for determining the hue to be powerless. I showed an example earlier of I believe Chrome which treated the hue as powerless, but if I set the chorma to 0.01 you get a color that looks pretty much achromatic, but where the hue is now significant in the interpolation.

[SoftMoonWebWare]

That's a good answer. "Trick" the algorithm with a minimal chroma. Along with "none", that solves all the problems I brought up.
Thanks again for your insights and time!
Aloha!