Closed mbertschler closed 7 years ago
Hi, thanks for the great report with example code and picture, and sorry for the long delay in answering!
This is actually Working As Intended™. The reason is that most of the colors you are trying to compute here don't actually exist. When you're asking to generate a color of hue, say 190° and both chroma and luminosity of 1.0, the corresponding RGB values would be -8.25590, 1.17914, 1.12230, meaning such a color is not representable in the RGB system (and a computer screen).
If you go for less extreme values of luminance and chroma, you will see more and more of the gradient appear. For some values, such as (0.35,0.65), the full gradient exists, and you'll get a nice picture like this:
If you really, really want to have a gradient of higher perceived chroma or luminance, though, there's an ugly workaround that you can do: clamp these non-representable colors to the closes representable one. This will not be entirely correct (converting the gradient to grayscale will show variations in brightness), but depending on your application, it is Good Enough™. I have actually specifically implemented the Clamped
function for that purpose, and called it out in the README's "Blending colors" section. I'll add an extra entry to the FAQ, do you have any other suggestion on making it more prominent?
So with that, simply change your code from col.RGB255()
to col.Clamped().RGB255()
and your demo produces gradients for any values, here is one for (0.8, 0.8), which I also converted to grayscale so you see the non-constant lightness:
@lucasb-eyer thank you for this detailed answer, the behavior makes sense. I already saw the added FAQ section, maybe you could also add a warning to the comments for the functions where color values outside of the RGB range could be returned? This way you would already see that this could happen before getting frustrated and reading the FAQ.
Good idea, thanks. Done!
Hi and thanks for this libary, it looks pretty useful! I generated a gradient over the hues 0 to 360 with the
Hcl
function, and the output looks wrong. Using theHsl
orHsv
functions causes no problems. Here is my rainbow gradient:The code I used to produce this image using a HTML file that I opened in my browser: