Hue of a Grayscale Tone in gradients? #577
-
|
What is the hue of a grayscale tone? Typically it does not matter. What about gradients?
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? 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:
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 Is there a way with CSS to specify this? Should there be? Or are we stuck with bloated gradient specs? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments · 1 reply
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. 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! |
Beta Was this translation helpful? Give feedback.
-
|
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.
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 |
Beta Was this translation helpful? Give feedback.
-
|
That's a good answer. "Trick" the algorithm with a minimal chroma. Along with "none", that solves all the problems I brought up. |
Beta Was this translation helpful? Give feedback.
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.
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 …