question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mix doesn't respect hue angle specification

See original GitHub issue

Problem

I was trying to recreate some of the examples from the CSS 5 mixing drafts, as this project seems to be a playground for expressing those ideas, and I realized I could not get mix to recognize the specified angle adjuster to use:

new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "shorter", space: "lch"});
// lch(52% 58.1 351.6)
new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "longer", space: "lch"});
// lch(52% 58.1 351.6)

Expectation

In the above examples, I would expect that when longer was used, the return would be:

new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "longer", space: "lch"});
// lch(52% 58.1 80.761)

I suspect this is unintentional and should be able to replicate such examples in the color 5 spec.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
facelessusercommented, Oct 16, 2020

By the way why are you setting L and C to NaN?

Because it works and it is unclear that this wasn’t supposed to be allowed. The code will return the other channel (for any channel) if the other is NaN.

The official docs actually do this, just not directly through the string.

// Two kinds of fade out to transparent
lime.range(new Color("transparent"));
lime.range(new Color(lime.space, [NaN, NaN, NaN], 0), {space: lime.space});
0reactions
svgeesuscommented, Nov 4, 2020

Related, the API documentation for the options object for color.range() does not mention the hue option, although the interpolation docs use it in examples. And when it is not used, the default does not seem to be shorter.

Read more comments on GitHub >

github_iconTop Results From Across the Web

part 12. glossary - The Dimensions of Colour
“change of hue produced by decreasing the purity of a colour stimulus while keeping its dominant wavelength and luminance constant” (CIE e-ILV 17-1)....
Read more >
Luminance-Hue Specification in the RGB Space
Abstract. This paper is concerned with a problem arising when editing color images, namely the Luminance-Hue Specification. This problem.
Read more >
Hue Circle - an overview | ScienceDirect Topics
In the Munsell system, the hues are so arranged that equal small hue differences occupy equal angles around the entire hue circle, and...
Read more >
CSS Color Module Level 4 - W3C
This specification describes CSS <color> values, and properties for ... Hue is represented as an angle of the color circle (the rainbow, ...
Read more >
HSL and HSV - Wikipedia
In these models, colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found