Color Picker needs RGB and HSL

[deanleigh]

Color Picker needs to have an option to return RGB to allow RGBa and possibly HSL and HSLa for future proofing.
It currently only returns RGB

[abjerner]

Might be worth elaborating on in which cases you've needed HSL or HSLa and why this needs to be in Umbraco.

It would be somewhat easy to create a package that does this instead.

[deanleigh]

HSL and HSLa for future proofing

There are even newer colour modes that support wider gamuts but people are already using HSL

MDN Colour

[JasonElkin]

Yes, though I suspect this would need to be a new property editor altogether, as in a v2, to allow for the breaking change in the value.

Prime candidate for a package mind you.

[abjerner]

@deanleigh my reason for asking you to elaborate is that I think your description is still a bit generic, so I'm unsure about which features that you are suggesting or looking for. If this were something that should be added to Umbraco, I think your description needs some more details.

But as mentioned by both Jason and my self, this would probably be something that belongs best in a package.

As an example of such a package, I did an proof of concept property editor a few years back that supports different color models. The data type supports setting up one of four models - RGB, HSL, CMY and CMYK.

As I were testing something out, each of the values can be locked. Eg. if you specify a value for Red in the data type, the user will only be able to change the Green and Blue values.

The property only supports one color model at a time, so if the data type is configured it to use RGB, users will only be able to select RGB values.

At least for the proof of concept, the colors are picked using three sliders (four for CMYK). This probably isn't that user friendly.

Under the hood, the package also uses my Skybrud.Colors package, so the returned value can either be an IColor instance, an RgbColor instance, a HslColor instance or a HEX string value. Both RgbColor and HslColor implement the IColor interface, and support a number of different color operations.

Is this (or parts of it) close to what you're suggesting?

[deanleigh]

Well firstly I have to say how fantastic… but of course for a developer to use not as you say an end user.

I ran into the issue where I wanted RGB returned to concatenate to create RGBa.
In this case it was for Bootstrap:
styleAttribute = $"background-color: rgba(var({colorLabel}-{colorShades}), {colorOpacity});";
but I was getting hex values and had to convert them.

I would just like the picker to allow the user to choose or input the colours in HEX, RGB or HSL and for the property to either return all three (I don't know if this is possible in Umbraco) or the one that was selected.

<input type="color"> found here:
Ref: MDN - input type="color"
seems to do just that in most browsers (not well on mobile) but seems an ideal replacement for the current picker.

My apologies if I am not being clear, I hope this helps.

[abjerner]

I guess you can look at this from two different angles - one is input and a second is output:

Input

Umbraco's color picker is based on the Spectrum color picker. While the UI it self doesn't support picking a HSL value, you can enter a HSL value into the input field, and it will convert it to either a hex code or an RGBA value with Umbraco's configuration. This is then also what Umbraco will save as the property value.

Output

As the saved value in Umbraco is either a hex code or a RGBA value, this is also what Umbraco will return. But if I were building a custom color picker (could be based on Umbraco's), it could be made to return an instance of IColor from my Skybrud.Colors package instead.

Like I mentioned earlier, this package supports a number of different color operations. For one, you can call .ToCss() which will return the corresponding CSS value that you can then use in your style attribute.

So something like:

<div style="background: @Model.Value<IColor>("color").ToCss();"></div>

would output something like:

<div style="background: rgb(244, 67, 54);"></div>

[JasonElkin]

Sorry, @deanleigh - for some reason I thought the picker only stored hex values, as opposed to both hex and RGBa... (but as strings, in CSS format... which seems a bit crazy).

What I was getting at is what @abjerner does above - storing a proper object to represent the colour, with methods for expressing that colour in multiple different ways (e.g. as an rgba string for CSS).

IMO, if a user chooses a specific format, e.g. hex or RGBA - I would expect that format choice to be persisted so that when they revisit the Backoffice they see the same format they used. I'd also expect that knowledge available on the other side of the property-value-converter.

That said, RGB, RGBa, HSL and HSLa are simply different notations for exactly the same RGB24/RGB32 colours so conversion to the current supported formats could just be handled...

It's all a bit academic though.

[abjerner]

The property editor from my screenshot is was from a proof of concept I did internally. It actually ended up proving that my concept didn't work. And the UI from the screenshot is not super friendly either.

But after my last comment, I also ended up playing a bit with Umbraco's color picker. It does save a CSS RGB/RGBA value, but it would be somewhat easy to build a new color picker property editor that extends Umbraco's, but then with a custom value converter to return something else - eg. an IColor from my package. From the UI point of view it would work exactly like Umbraco's, but the return value would be something different. I might look a bit more into this 😉

[JasonElkin]

Good news @deanleigh!

The current colour picker (v12) can indeed use, and will return, RGBA:

Even better news:

New backoffice (v14+) supports HSLA:

You can test it out here: https://uui.umbraco.com/?path=/story/uui-color-picker--with-opacity

Slightly sad news:

HSL is unlikely to make it into anything below v14, as backoffice dependencies are effectively frozen. But this is a really easy package to make if you need it.

[abjerner]

Even for U14, it seems that the color picker is configured for a given format. So if you configure it to hex, it will also save it as HEX even if you enter a HSL value. So it's kinda like now, although the UI is a bit better (the current one also allows pasting a HSL value).

[bjarnef]

Using the color picker (which I added btw) in the UI Library it should be possible to configure default to hsl and disable toggle formats.
https://uui.umbraco.com/?path=/story/uui-color-picker--formats&args=format:hsl;noFormatToggle:!true

The current color picker also allows to wrap it in your own property editor and customize the options further.
https://seballot.github.io/spectrum/#options-preferredFormat

https://our.umbraco.com/forum/using-umbraco-and-getting-started/112611-eye-dropper-palette-how-to-change-default-colors#comment-347604