[BUG-3882] Perspective colour properties not showing HSL colour in preview

[nminchin]

When using a human-readable colour space

(i.e. HSL - got to plug HSL where I can!! RGB colour space is far too overused and complicated. If you don’t think so, tell me what colour #2BCA95 is. Compare that to hsl(160, 65%, 48%) knowing that main colour hues (R,Y,G,C,B,M,(R)) are 60 degrees apart, you already know that it’s blue-green (G=120, C=180) with simple, brain-friendly, memorisable year 2 maths)

the colour preview doesn’t show correctly. h=260 is purple, not red as depicted. The colour in the view is ok, it’s just the preview that isn’t. The colour preview is using RGB(260, 80, 80)

[nminchin]

Still an issue in v8.3 Would be nice if this worked. I try to only ever use HSL since RGB is too mind boggling to modify.

[justinedwards.jle]

@nminchin

RGB is too mind boggling to modify.

That's interesting to me. From my perspective [no pun intended], RGB seems so simple by comparison. Can you expand on this statement, or perhaps give an example? In other words, make me a convert to HSL?

[nminchin]

Say you have rgb 85, 186, 146 or #55ba92

Firstly, without looking it up, what colour is that?

How bright is it? (you can get a rough idea)

What kind of saturation is it? (again, rough idea)

Now, I want to lower the saturation and keep the same hue. What about changing the brightness while keeping hue?

HSL. Knowing that Saturation and Lightness are in %, and Hue is from 0 to 360deg and that each main colour is every 30 degrees (0 red, 30 orange, 60 yellow, etc), I can tell you exactly what colour, saturation, and brightness hsl(86, 80%, 60%) is very quickly. It’s a green with a bit of yellow, and saturation/lightness are obvious. Changing the values is child’s play. Need a bit more yellow? Just bump the H down a bit. Need another hue with the same S and L? Just change the H.

HSL is human readable and editable, once you know how the H works. It’s also extremely simple to dynamically create via expressions

RGB you can kind of guess what colour it is, but editing it is impossible, especially if you are trying to maintain hue. And dynamically creating it with an expression? Forget it

Consider that in UI development, you're mainly finding hues to use, and then playing with their saturations and lightness to get the right colours. HSL plays perfectly into that, along with all the other benefits above

[justinedwards.jle]

Nicely done!

[nminchin]

I made an HSL cheat sheet in Perspective:

Useful CSS Stuff

I've added this to a few posts now before realising it really belongs here… I made an HSL cheat sheet in Perspective to help remember the Hue values in the human-readable HSL colour format (as opposed to the mostly human-illegible RGB): [image] View Exports: HSL Cheat Sheet.zip (27.8 KB)

[andrew.budaiev]

I am also running into this issue with the project that was started with HSL colours. To elaborate on original post with the pictures:

When manually pasting an HSL value into a style attribute, the colour preview square in the designer shows a completely different colour than what the HSL value represents.

Should be:

If I use the native Perspective colour picker to select or modify a colour, the designer automatically converts the value back to a Hex code.

[paul-griffith]

Yeah, the preview layer is Java/Swing code, and not doing true CSS parsing/rendering; it's (I assume) just finding the first three numeric substrings and assuming they're an RGB code, rendering as #d42d0f (

) instead of #152537 (

).

[andrew.budaiev]

@paul-griffith

rendering as #d42d0f

Yep

[paul-griffith]

Not that the current behavior is ideal, but I'll mention that the problem becomes very quickly how far down the rabbit hole you go. There's a lot of ways to specify a color in CSS:

- CSS | MDN

Though what we could absolutely do is simply make our parsing stricter, and only render the preview if it's actually RGB and just let you deal with HSL/etc yourself in the short term.

[nminchin]

I don’t use rgb anymore myself, as it’s just too hard to work with but I absolutely understand the impossible task of replicating css colours in Java!

[David_Stone]

@paul-griffith

Though what we could absolutely do is simply make our parsing stricter, and only render the preview if it's actually RGB and just let you deal with HSL/etc yourself in the short term.

Every new version of ignition, change the calculation for the preview colour for anything other than RGB, keep Nick on his toes.