Enhanced Color Format Support in XAML/Styles based on CSS

[robloo]

Is your feature request related to a problem? Please describe.

The framework works in the RGB color model for good reasons. However, there are cases where other color models should be supported for designers and control authors. In additional HTML/CSS supports alternative formats.

Describe the solution you'd like

Add support for all HTML/CSS color formats and include a new one for HSV.

Examples:

• "Green" (already supported)
• "#ff0000" (already supported)
• "rgb(255, 0, 0)" new for Avalonia based on CSS
• "rgba(0, 255, 0, 0.3)" new for Avalonia based on CSS
• "hsl(120, 100%, 75%)" new for Avalonia based on CSS
  • "hsl(120, 1.0, 0.75)" new for Avalonia (not in CSS)
• "hsla(120, 100%, 75%, 0.3)" new for Avalonia based on CSS
  • "hsla(120, 1.0, 0.75, 0.3)" new for Avalonia (not in CSS)
• "hsv(300, 100%, 20%)" new for Avalonia (not in CSS)
  • "hsv(300, 1.0, 0.2)" new for Avalonia (not in CSS)
• "hsva(300, 90%, 20%, 0.8)" new for Avalonia (not in CSS)
  • "hsva(300, 0.9, 0.2, 0.8)" new for Avalonia (not in CSS)

Note that alpha can also be specified as a percentage by adding a percent sign. This is an extension of the format that CSS does not have.

Advantages:

• Three color models could be supported HSV, HSL and RGB (existing)
• Full compatibility with HTML/CSS color format strings
• No need for designers or developers to convert always into hex ("#FFFFFF") or named ("White") formats.
• Makes Avalonia the best XAML framework to use when working with colors!

This would be supported in the XAML parser by modifying the Color.Parse() methods to handle all formats including those for HSV/HSL. It's convenient that Color is named simply Color instead of RgbColor as this modification still makes sense in the API naming!

Other color models will be automatically converted to RGB after parsing. Code for parsing and conversion other color models to RGB would not be within the Color struct itself and would instead exist in HsvColor and potentially HslColor.

Describe alternatives you've considered

Alternative is to keep using simple RGB color formats.

Additional context

• https://www.w3schools.com/cssref/css_colors_legal.asp
• In the future the parser may be extended to forgo commas and allow only spaces between the components "rgb(255 0 30)"

[robloo]

@jmacato I am willing to implement this at some point in the coming weeks. However, I would like:

1. An initial sign-off from the core team that it is directionally correct
2. Confirmation there are no objections to adding another HslColor struct -- this one would be marked internal if at all possible though (it should only be used in Color for conversions at this point)

[jmacato]

I think there was no explicit objections when i raised this issue so this is good to go! More compatibility with common colorspaces will be awesome IMO

[robloo]

Alright, thanks for confirming. This could grow into a moderately-sized PR all things considered (Span helpers, unit tests, HslColor). So I'm not committing to a time-frame; however, goal is by 11.0 in a few months tops.

I also might do a string-based initial version that can be followed up with Span-based optimizations later.

[grokys]

Any reason that this was added for Color but not for brushes? I'd expect to be able to write:

<Border Background="rgb(0.5,0.5,0.5)"/>

The same as I can write:

<Border Background="#808080"/>

[robloo]

No reason, just an oversight. With colors we got it for free with the Color.Parse method. Brushes I'll have to look at.