Use modern (CSS color level 4) syntax for colors in the color picker

[glen-84]

When converting colors using the color picker, the old comma-based syntax is used:

(it should also show hsl here, at the top of the picker, not rgba)

Please update the picker to use the modern (CSS color level 4) syntax for colors.

With regard to the exact syntax, I agree with these suggestions from @mathiasbynens:

• consider being opinionated w.r.t. how to represent alpha values. IMHO using percentage notation is most readable, as it clarifies the range: e.g. 70% vs 0.7
• consider being opinionated about using the deg suffix where applicable, e.g. in the first parameter for hsl() and the last non-alpha parameter for lch(). Again, because this clarifies that the range lies between 0-360.

i.e. Use percentages for alpha, and always include the deg suffix.

This also matches the syntax displayed in Chrome developer tools.

[glen-84]

@rebornix Please mention the issue that this duplicates. I searched before opening this, and again now, but I can't find one.

[rebornix]

I thought there is an easier one but I couldn't find it anymore. Let's use this issue to track CSS color level 4 syntax support.

[aiday-mar]

This issue has been fixed since then

[lachieh]

The picker still displays and cycles through the old syntax. The only one that uses the level 4 syntax is hwb but that is because it was only added in the level 4 spec. I don't think this is resolved.

css-picker.mp4

[aiday-mar]

Hi thank you for your comment. Ah yes apologies I thought you meant using HSL values but you meant a different representation format for HSL. I will reopen the issue.

[T3sT3ro]

I think it was related to all Level 4 color syntax forms, which I also find lacking. I am currently looking into the VScode source myself.

To summarize:

• named colors
• hex values
• rgb
• rgba
• hsl
• hsla
• hwb
• lab
• lch
• oklab
• oklch
• color

With more and more libraries using oklch/oklab by default, this is becoming more and more important.

Should it go into /vscode/src/vs/editor/common/languages/defaultDocumentColorsComputer.ts or the css language server and use the ColorProvider API?

How much work would it be to also include support for var() and calc expressions?