Color function and percents seems confusing
See original GitHub issueConsider 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:
- Percents in color functions will always be translated to a range between 0 and 1.
- 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:
- Should percent syntax not be used with the color function if using color spaces Lab, LCH, HSL, HWB, etc?
- Are percents in this case supposed to work for Lab, LCH, and others, but scaled differently than RGB color spaces?
- Should colors like Lab scale their percent channels to be between 0 - 1 internally, but not the other channels?
- 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 thea
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:
- Created 3 years ago
- Comments:6
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yep, I think I need to clean up and commit those new CSS changes. I think things are pretty clear now.
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