CSS Color 4 RGB/RGBA syntax - Whitespace syntax and RGB alpha value

[marcoSven]

Please read and fill out this template by replacing the instructions with appropriate information. If the template is not followed, the issue will be marked Invalid and closed.

Before submitting an issue search past issues and read the area of the documentation related to your specific question, issue, or request.

---

Description

... what is the issue / request ?
Add support for CSS Color 4 RGB/RGBA syntax

Vague issues/requests will be marked with Insufficient Details for about a week. If not corrected, they will be marked Stale for about a week and then closed.

For feature requests or proposals:
CSS Color 4 RGB/RGBA syntax

Suggestion to support

/* Functional syntax with alpha value */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax */
rgba(51, 170, 51, 1)
rgba(51, 170, 51, 100%)

/* Whitespace syntax */
rgba(51 170 51 / 0.4)
rgba(51 170 51 / 40%)

😀 https://www.chromestatus.com/feature/5124205561511936

• Clearly define in as much detail as possible how you imagine the feature to work.
• Examples are also appreciated.

For bugs and support questions:

• Describe the bug/question in as much detail as possible to make it clear what is wrong or what you do not > understand.
• Provide errors from console (if available).
• Pictures or screencasts can also be used to clarify what the issue is or what the question is.
• Provide links to 3rd party syntax highlighting package you are using if applicable.

Support Info

...

Run the following command from the menu: Preferences->Package Settings->ColorHelper->Support Info. Post the result here.

Steps to Reproduce Issue

1. First step...
2. Second step...
3. Third step...

Provide steps to reproduce the issue. Pictures are fine, but also provide code/text I can copy and paste in order to reproduce. Omit for feature requests and feature proposals.

[facelessuser]

While I see where space syntax is specified in the level 4 syntax, I do not see it mentioned for functions like rgba and hsla, just for rgb, hsl, hwb, etc.

[facelessuser]

Spec reference https://www.w3.org/TR/css-color-4/

[facelessuser]

I will have to verify real world browser usage of whitespace syntax for rgba as the spec isn't explicitly clear on this point.

[facelessuser]

Okay, it seems as if browsers treat rgba simply as an alias for rgb. At least chrome does as it allows alpha channels in rgb and rgba using the legacy comma format, which I guess makes sense for maintenance. In that case we will probably just do the same and remove all difference from <colorspace> vs <colorspace>s functions recognition. That goes for RGB, HSL, HWB, and GRAY.

It seems commas cannot be mixed with whitespace and / alpha is only recognized on whitespace format.

[marcoSven]

Yes As of CSS Colors Level 4, rgba() is an alias for rgb(). In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.

It seems commas cannot be mixed with whitespace

Yes

and / alpha is only recognized on whitespace format.

Yes [/ alpha] is for whitespace syntax. Alpha is supported in both formats

• rgb[a](R, G, B[, A])
• rgb[a](R G B[ / A])

Numbers or percentages are allowed but can't be mixed for R, G & B.
A can be between 0 and 1 or a percentage where the number 1 corresponds to 100%

It's the same for hsl, I suggest to drop hsla and rgba in the conversion options list if "allowed_colors" is css4

[facelessuser]

It's the same for hsl, I suggest to drop hsla and rgba in the conversion options list if "allowed_colors" is css4

That is a possibility. We'll have to see, if nothing, it is definitely a direction to work towards.

[facelessuser]

Will probably make CSS Level 4 color behavior default and just drop old previous behavior. Browsers do this now as well, and I'm fine with that. With that said, it doesn't mean I'll have Lab support and things yet, just that RGB, HSL, and HWB will behave according to CSS Level 4. I don't know when I'll get to adding support for other color spaces 🙂.

[facelessuser]

@gir-bot remove S: triage
@gir-bot add T: feature

[facelessuser]

Getting close. There's a number of places in which we need to make some adjustments, but detection seems to be working:

[facelessuser]

No browsers support them, but hwb() seems to no longer specify comma syntax, nor does gray(). gray(a / b) is also equivalent to lab(a, 0, 0 / b). Not sure if I got this wrong the first time, or if it changed underneath me 🤷.

I probably won't take away comma format of hwb() (even if it may not be valid anymore) but I may start forcing it's inserted form to be hwb(0 100% 100% / 1) (same for gray()). I imagine hardly anyone would be using hwb or gray anyways as they only seem to exist in the spec.

I may disable gray() until I get lab() support in as I need to treat it as a lab color and run it through all the conversions and such so I can render the previews and convert to other formats.

This all will be handled by separate issues, just thought I'd mention it.

[facelessuser]

I know I still haven't pushed out a release in like a month, but just an FYI, there should hopefully be a beta out sometime soon-ish (hoping within the week). There were many areas that were re-written and such. The aim was to allow more flexible input and output, more configurability, and improve color scanning behavior.

Currently, all this work is on the feature/next branch info here #159. We have a new color library that ColorHelper uses and can handle not just sRGB, HSL, HWB, but it can handle LCH, LAB, and others.

Because of this, we've reworked color previews as now we have to handle colors that are out of gamut, so some simple gamut mapping is now available or the option to not show the color at all. We've added some new color tools as well. Anyways, a lot of work went into this next release which is why the holdup.