lab() and lch() color previews added #306

GauravB159 · 2022-11-06T03:54:54Z

Issue #305
Main Repo Issue microsoft/vscode#165207

Added lab() preview
Added lch() preview
Added basic unit tests for lab()
Added basic unit tests for lch()
Fixed logic where negative values inside a color function were not parsed
Added oklab() preview
Added oklch() preview

aeschli · 2022-11-09T15:03:43Z

Thanks for the PR, it looks promising. I added comments.

please format the changes with the TypeScript formatter built-in in VS Code
use const when possible

GauravB159 · 2022-11-09T17:26:43Z

Done! Didn't know about the formatter, I'll keep that in mind going forward. And I've replaced const when possible. Is the functionality required all covered by this? I'll add more test cases and the other two functions if so. Thank you.

romainmenke · 2022-11-09T19:06:12Z

Thank you for this @GauravB159!

I've gone over these changes and the conversions don't seem to be accurate.
Can you share the source of the transforms?

Good reference code can be found here : https://github.com/w3c/csswg-drafts/tree/main/css-color-4
WPT has a bunch of tests : https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&view=subtest

We also have a bunch of tests : https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css
And also code that you can take : https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function/src/css-color-4

But best of all would be to use https://github.com/LeaVerou/color.js, if @aeschli is open to adding this as a dependency?
The authors of this package are the specification editors for most of the things related to color in CSS.

One important aspect that doesn't seem to be covered here is out of gamut color handling. It is not possible to round trip lab -> rgb -> lab for all colors without changing the channel values. This might be confusing for users if they are not aware of this and just switch to a different color function out of habit.

GauravB159 · 2022-11-09T19:26:56Z

Hi @romainmenke

I used this webpage for a reference for the formulae. Is there somewhere I could see the correct values?

I was using this online converter to verify my values. It does give values in decimals, but rgb requires whole numbers I guess, so I have rounded the values at the end. Maybe that is causing an issue?

lab -> rgb -> lab is probably inaccurate because of the rounding up right? Is there a workaround to that that I could implement?

Thanks for your help! I'll check out the code you linked, maybe there's some issue with the formula implementation.

aeschli · 2022-11-09T21:29:22Z

Thanks for the great info @romainmenke !
No added dependencies please. It would mean quite some administrative overhead as I have to get legal approvals. Also for maintenance it's easier if we own all the code.

romainmenke · 2022-11-09T21:41:34Z

lab -> rgb -> lab is probably inaccurate because of the rounding up right? Is there a workaround to that that I could implement?

Rounding errors might also cause this, but those would be very small deviations.
lab, lch,... however can all express a lot more colors than srgb (even some colors that do not exist). So a valid value in lab might not have a corresponding value in srgb.

I think there are three options :

allow channel values in srgb to go under 0 or above 255. (this options is lossless)
clamp channel values in srgb to 0 - 255. (lossy and gives poor results)
apply a gamut mapping so that colors from lab that are out of gamut for srgb are visually similar. (lossy and gives ok results)

The "right" option depends on the function of this feature in VSCode :

a way to change the format of a color function without changing the value
a way to change a color in one color space to a another
a way to change a modern format to a legacy format or back
....

No added dependencies please. It would mean quite some administrative overhead as I have to get legal approvals. Also for maintenance it's easier if we own all the code.

Got it!
Yes avoiding all that is better.

The code linked from the CSSTools repo is a port to TypeScript from the reference implementation that exists in the csswg-drafts repo.

It has the same W3C license because the only thing I did was add typings.

GauravB159 · 2022-11-09T21:49:12Z

@romainmenke Yeah, I understand what you're saying. Now that you mention it, I remember there were negative and valuss greater than 255 after converting to sRGB. I clamped those values to 0-255 which might be causing the loss.

@aeschli Which option do you recommend we go with? We could store the negative values and clamp them just while displaying the color possibly.
Although this might still cause issues in a lab->rgb->lab conversion through the color picker since it will pick up the clamped string from the new rule and use that, and not the stored negative values.

domnantas · 2024-11-10T12:28:39Z

Conversion from a wide to a narrow gamut is naturally lossy, so that should not be avoided. In the case of the color picker, the users can be informed that conversion is lossy, like in Chrome's DevTools color picker: https://developer.chrome.com/docs/devtools/css/color#convert-colors This approach may require ditching the click-to-convert in favor of a dropdown.

romainmenke · 2024-11-10T12:49:57Z

Conversion from a wide to a narrow gamut is naturally lossy

When displaying a color on a screen or in print, yes.

But wide gamut colors can still be represented in narrow gamut notations by going beyond the value ranges that describe the boundaries of the narrower gamut.
These round-trip just fine if the implementations are correct.

rgb(300 -20, 0) -> beyond 0 - 255, so out of gamut but otherwise there is nothing weird about these values.

There is no mathematical reason to make these lossy when converting from one notation to another.

domnantas · 2024-11-10T14:14:38Z

Interesting, rgb(300, -20, 0) seems to be valid in CSS, and browsers take care of clamping it to sRGB. This leads me to believe the option 1 @romainmenke suggested

allow channel values in srgb to go under 0 or above 255. (this options is lossless)

fits VSCode usecase the best, though I'm curious how would rgb(300, -20, 0) be converted to hex.

aeschli · 2022-11-09T14:43:04Z

src/languageFacts/colors.ts

+		z: 0,
+		alpha: lab.alpha ?? 1
+	};
+	xyz["y"] = (lab.l + 16.0) / 116.0;


use xyz.y instead of xyz["y"]

aeschli · 2022-11-09T14:45:21Z

src/languageFacts/colors.ts

@@ -14,7 +14,9 @@ export const colorFunctions = [
 	{ func: 'rgba($red, $green, $blue, $alpha)', desc: l10n.t('Creates a Color from red, green, blue, and alpha values.') },
 	{ func: 'hsl($hue, $saturation, $lightness)', desc: l10n.t('Creates a Color from hue, saturation, and lightness values.') },
 	{ func: 'hsla($hue, $saturation, $lightness, $alpha)', desc: l10n.t('Creates a Color from hue, saturation, lightness, and alpha values.') },
-	{ func: 'hwb($hue $white $black)', desc: l10n.t('Creates a Color from hue, white and black.') }
+	{ func: 'hwb($hue $white $black)', desc: l10n.t('Creates a Color from hue, white and black.') },
+  { func: 'lab($lightness $channel_a $channel_b $alpha)', desc: l10n.t('css.builtin.lab', 'Creates a Color from Lightness, Channel a, Channel b and alpha values.') },


l10n.t no longer uses a key as first argument

aeschli · 2022-11-09T14:59:01Z

src/parser/cssScanner.ts

@@ -440,12 +440,13 @@ export class Scanner {
 	}

 	private _number(): boolean {
-		let npeek = 0, ch: number;
+		let npeek = 0, ch: number, next_ch: number;


That's not a good change. In the scanner, numbers and the minus are separate tokens.
The parser then has the concept of unary operator, where a minus can be combined with a number literal
This happens in _parseTerm

aeschli · 2022-11-09T15:00:40Z

src/test/css/languageFacts.test.ts

@@ -128,6 +171,10 @@ suite('CSS - Language Facts', () => {
 		assertColor(parser, '#main { color: hsla(240 100% 50% / .05) }', 'hsl', colorFrom256RGB(0, 0, 255, 0.05));
 		assertColor(parser, '#main { color: hwb(120 0% 0% / .05) }', 'hwb', colorFrom256RGB(0, 255, 0, 0.05));
 		assertColor(parser, '#main { color: hwb(36 33% 35%) }', 'hwb', colorFrom256RGB(166, 133, 84));
+		assertColor(parser, '#main { color: lab(90 100 100) }', 'lab', colorFrom256RGB(255, 112, 0));


also test percentages

GauravB159 · 2025-02-18T18:54:19Z

@aeschli When I was last working on this PR, oklch() and oklab() were still pending, I'm assuming they still are. The original issue does ask for them, should those be implemented in a separate PR? Haven't worked on this in a while but can look into it if needed.

aeschli · 2025-02-18T20:59:28Z

Yes, a new PR is best and help is welcome!

rgant · 2025-04-22T17:11:47Z

src/services/cssNavigation.ts

+		result.push({ label: label, textEdit: TextEdit.replace(range, label) });
+
+		const lch = lchFromColor(color);
+		if (lab.alpha === 1) {


Shouldn't this be lch.alpha?

…ctions __RESOLVES:__ _feature_ - *Add new CSS color functions* \[[microsoft#305](https://github.com/microsoft/vscode-css-languageservice/issues/305)\] __DESCRIPTION:__ CSS Color Module Level 4 adds support for `oklch` and `oklab` to browsers. They are becoming more popular, and I wanted to use them with color previews in my editor. This feature is built of of the original [microsoft#306](microsoft#306) which included steps for `lab` and `lch` but not the `ok` variants. Generally this code was designed using real world color [examples](https://www.oddcontrast.com/#hex__*f00__*4d216f80__srgb). __STEPS TO TEST:__

GauravB159 added 12 commits November 5, 2022 19:30

Added conversion functions for LAB to RGB for the preview

71637c3

Added the ability to parse negative numbers since LAB requires it

605afed

Added basic tests for LAB, need to add more cases yet

d3674b6

Added lch() conversion functions

3ebcdf7

Added basic tests for lch(), need to add more

3b3145a

Added lch() conversion functions

780733f

Added basic tests for lch(), need to add more

736a01f

Merge

6171e43

Removed merge conflict

2c80fe3

Removed warnings and added reverse conversion functions

f814a01

Added color presentations for lab and lch to make picker work

d466e21

Added new tests for lab and lch functions

8d98ec7

GauravB159 marked this pull request as draft November 8, 2022 13:17

Merge branch 'main' into new_css_functions

22543ed

aeschli and others added 2 commits November 9, 2022 16:04

Merge branch 'main' into new_css_functions

112ec91

Ran the built-in formatter and replaced const where appropriate

13566d1

GauravB159 marked this pull request as ready for review January 23, 2024 19:32

aeschli added 2 commits February 18, 2025 08:35

Merge branch 'main' into pr/GauravB159/306-1

Loading
Loading status checks…

c5f717f

more tests, fix for xyzToRGB

Loading
Loading status checks…

eeb9579

aeschli self-assigned this Feb 18, 2025

number can start with + or -. Fix <an+b> parsing

Loading
Loading status checks…

6b47fea

aeschli added this to the February 2025 milestone Feb 18, 2025

aeschli approved these changes Feb 18, 2025

View reviewed changes

aeschli enabled auto-merge (squash) February 18, 2025 16:05

jrieken approved these changes Feb 18, 2025

View reviewed changes

aeschli merged commit 1114606 into microsoft:main Feb 18, 2025
3 checks passed

GauravB159 deleted the new_css_functions branch February 18, 2025 18:54

rgant reviewed Apr 22, 2025

View reviewed changes

rgant mentioned this pull request Apr 24, 2025

feature:(#305) Add support for oklab and oklch color functions #436

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lab() and lch() color previews added #306

lab() and lch() color previews added #306

GauravB159 commented Nov 6, 2022 •

edited

Loading

aeschli commented Nov 9, 2022

GauravB159 commented Nov 9, 2022

romainmenke commented Nov 9, 2022 •

edited

Loading

GauravB159 commented Nov 9, 2022

aeschli commented Nov 9, 2022

romainmenke commented Nov 9, 2022

GauravB159 commented Nov 9, 2022

domnantas commented Nov 10, 2024

romainmenke commented Nov 10, 2024 •

edited

Loading

domnantas commented Nov 10, 2024

aeschli Nov 9, 2022

aeschli Nov 9, 2022

aeschli Nov 9, 2022

aeschli Nov 9, 2022

GauravB159 commented Feb 18, 2025

aeschli commented Feb 18, 2025

rgant Apr 22, 2025

lab() and lch() color previews added #306

lab() and lch() color previews added #306

Conversation

GauravB159 commented Nov 6, 2022 • edited Loading

aeschli commented Nov 9, 2022

GauravB159 commented Nov 9, 2022

romainmenke commented Nov 9, 2022 • edited Loading

GauravB159 commented Nov 9, 2022

aeschli commented Nov 9, 2022

romainmenke commented Nov 9, 2022

GauravB159 commented Nov 9, 2022

domnantas commented Nov 10, 2024

romainmenke commented Nov 10, 2024 • edited Loading

domnantas commented Nov 10, 2024

aeschli Nov 9, 2022

Choose a reason for hiding this comment

aeschli Nov 9, 2022

Choose a reason for hiding this comment

aeschli Nov 9, 2022

Choose a reason for hiding this comment

aeschli Nov 9, 2022

Choose a reason for hiding this comment

GauravB159 commented Feb 18, 2025

aeschli commented Feb 18, 2025

rgant Apr 22, 2025

Choose a reason for hiding this comment

GauravB159 commented Nov 6, 2022 •

edited

Loading

romainmenke commented Nov 9, 2022 •

edited

Loading

romainmenke commented Nov 10, 2024 •

edited

Loading