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.

Color function and percents seems confusing

See original GitHub issue

Consider the following (outputs as comments):

new Color("color(srgb 100% 50% 30%)"); // rgb(100% 50% 30%)
new Color("color(lab 100% 50 30)"); // lab(1% 50 30)

I think I understand the intention:

  1. Percents in color functions will always be translated to a range between 0 and 1.
  2. Floats/integers are always taken at face value.

So with sRGB, this maps to sane values because they store their data in the range 0 - 1, but with Lab 100% maps to 1% as that space does not scale the color channels which makes sense as, for instance, a and b are theoretically unbound so they do not reasonably fit the mold that sRGB channels do.

So here are the questions:

  1. Should percent syntax not be used with the color function if using color spaces Lab, LCH, HSL, HWB, etc?
  2. Are percents in this case supposed to work for Lab, LCH, and others, but scaled differently than RGB color spaces?
  3. Should colors like Lab scale their percent channels to be between 0 - 1 internally, but not the other channels?
  4. Is this a one-way conversion? So 100% will translate to 1 but if you enter color(lab 1 0 0) you will not get 100%, but you should get 1%? And if 1 should translate to 100%, do you not scale the a channel of 50 to be 100 * 50 (meaning that the logic differs based on the channel)?

Basically, I can’t tell if the translation of percents is supposed to be just a general handling of percent inputs in color functions, or if it is supposed to be color space aware. It is unclear looking at the level 4 color spec, so I’m not sure if the implementation here represents reality or not.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
facelessusercommented, Jun 21, 2022

Yep, I think I need to clean up and commit those new CSS changes. I think things are pretty clear now.

0reactions
svgeesuscommented, Jun 21, 2022

CSS Color 4 now defines explicit reference ranges for each color space, so that interconversion between numbers and percents is clearly defined in all cases. For example for OKLab and OKLCH

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - from green to red color depend on percentage
I have a poll system and I want answers for this poll to be colored. For example: If it's 10% it would be...
Read more >
How to Choose Colors for Data Visualizations - Chartio
Color is a major factor in creating effective data visualizations. Read this article to learn how color is used to depict data and...
Read more >
Synesthesia - Wikipedia
Not to be confused with Synthesia. Synesthesia (American English) or synaesthesia (British English) is a perceptual phenomenon ... In one common form of...
Read more >
Color Psychology in Marketing and Branding is All About ...
The psychology of color as it relates to persuasion is one of the most interesting — and most controversial — aspects of marketing....
Read more >
Understanding Color - X-Rite
Colorimeters and densitometers can play a useful role in the color measurement process, but they do not deliver the same color data as...
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