sarajw, 2 months ago

@chrisdavidmills awesome!

I'm a little confused, as it seemed like all the colours added after the 'from' were named colours. But it could be anything, right?

One of my biggest annoyances is always being issued colours in hex format - so it'd be great to see an example where hsl() takes some hex value like #ff0080 and spits out the same colour albeit with maybe a change in luminance or something.

But also, TIL. This fixes exactly my annoyance, it would be cool to not always convert colours!

chrisdavidmills, 2 months ago

@sarajw That's correct — the origin color can be hex, named colors, any function, a CSS variable, even another relative color.

I do say that early on in the guide, but perhaps I should have varied the examples a bit more. I wanted to keep the early examples really simple to avoid making readers think of too many things at the same time when getting used to the syntax.

BUT, having colors delivered via hex codes is still super common, as your message attests. Could do with some examples?

sarajw, 2 months ago

@chrisdavidmills It's a great guide, I've definitely learned something!

But yes maybe if there's a section that does nothing but switch different formats in and out, rgb to hsl, hex to rgb, rgb to olch, or what have you.

Otherwise I find I'm forever visiting https://convertacolor.com - it's a cool site but it's a step I'll be happy to avoid from now on!

sarajw, 2 months ago

@chrisdavidmills Sorry reread your message - concrete example:

I get a hex value out of some random color picker: #8EAAA5

I'd like to use this colour, and get some darker versions of it as well.

So (hopefully I've got this right), I could do it like this:

--theme: hsl(from #8EAAA5 h s l);  
--darker: hsl(from #8EAAA5 h s 50%); // #6E918B  
--darkest: hsl(from #8EAAA5 h s 35%); // #4D6661  

chrisdavidmills, 2 months ago

@sarajw Great, thanks for the example! I'll look into adding something next week.

sarajw, 1 month ago

@chrisdavidmills Hey! Do you mind if I reference relative colors and your article in a talk?

chrisdavidmills, 1 month ago

@sarajw Hey! that is totally cool with me.

I've not forgotten about the hex colors examples either; just snowed under with other stuff currently.

sarajw, 1 month ago

@chrisdavidmills no worries!

sarajw, 23 days ago (edited 22 days ago)

@chrisdavidmills I'm afraid at the last minute it's going to come out of my talk because I think I may have found a bug!

Seems like doing say hsl(from Canvas 30 s l); doesn't follow how Canvas (a system color) flips between near-white to near-black when color-scheme changes from light to dark.

Interesting though!

#CSS #IsItABug #OrIsItJustMe

chrisdavidmills, 22 days ago

@sarajw oh, interesting; that sounds like a super fun bug. I'm assuming you've reported it to the Chrome folks; be interesting to see what they say.

I've still got the changes we discuss on my radar; been so busy that I've not had time. I'm currently in the middle of documenting CSS anchor Positioning; possibly after that.

sarajw, 22 days ago

@chrisdavidmills Oh don't feel bad about that! Yes I need to work out where to put that issue and how to search that it's not already there...

sarajw, 22 days ago

@chrisdavidmills Bramus helped me out :)

Just changed the example I wrote two replies up as of course the lightness won't change when I set the lightness - but still having that trouble anyway.

sarajw, 22 days ago

Hey @bramus I often get lost in how best to report issues such as this one - should it go through the in-Chrome feedback dialog or a repo or..?

@chrisdavidmills

bramus, 22 days ago

@sarajw @chrisdavidmills Best to go to https://crbug.com/new and follow the form flow.

Did a quick check and I found https://issues.chromium.org/issues/40935612 for this.

Best to leave a comment with your findings on the issue to blew some new life into it.

sarajw, 22 days ago

@bramus fantastic, thank you!

@chrisdavidmills

pete, 2 months ago

@chrisdavidmills Not very metal examples are they? 😂 You so should have based everything on black, and reasoned that 'background-color: lch(from black calc(l - 20) c h);' was like really black.

a color palette generator with hues based on black
three color panels, one grey and two black with code indicating that technically one of the black panels is darker

patrick_h_lauke, 2 months ago

@pete @chrisdavidmills "black for the sky, black for the sea, all black..." https://www.youtube.com/watch?v=XAERxf4yYaw

paul, 2 months ago

@chrisdavidmills amazing work as always, thank you