Mastodawn

Chris Lilley 🏴󠁧󠁢󠁳󠁣󠁴󠁿Mar 21, 2024

I've finally managed to get relative CSS colors documentation published on MDN. This was a complex beast to tackle, and I'm proud to see it out! Get started at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors; also see the color function pages to find out what relative colors look like in each.

Using relative colors - CSS | MDN

The CSS colors module defines relative color syntax, which allows a CSS <color> value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

MDN Web Docs

Chris Mills Apr 4, 2024

A shoutout that I forgot to include first time round — I also wanted to thank @estelle from Open Web Docs for her tireless and detailed review work on my relative colors MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

Using relative colors - CSS | MDN

The CSS colors module defines relative color syntax, which allows a CSS <color> value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

MDN Web Docs

Paul Kinlan Mar 20, 2024

@chrisdavidmills amazing work as always, thank you

Pete Mar 20, 2024

@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. 🤘

Patrick H. Lauke Mar 20, 2024

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

Very Dark Almost Black - Johnny Nice Painter, The Fast Show. Remastered [HD]

YouTube

Pete Mar 20, 2024

@patrick_h_lauke @chrisdavidmills Haha! I didn't even need to click the link to know what that was gonna be.

Chris Mills Mar 20, 2024

@pete @patrick_h_lauke lol, me too ;-)

Chris Mills Mar 20, 2024

@pete I'm the prince of fucking darkness, don't you know? ;-)

Pete Mar 20, 2024

@chrisdavidmills Someone talked of Dark Satanic Mills in a call the other day and I got all sentimental! And unrelated to that, was also remembering us watching Cheryl and PJ's band before hanging out at his brother's rock'n'roll pad surrounded by MTV awards and the like. #GoodTimes

Chris Mills Mar 20, 2024

@pete Yup, good times man! I did enjoy the Apress days. What are you up to these days?

Pete Mar 20, 2024

@chrisdavidmills I work as a jack of all trades on a training, simulation, and AI testing platform for radiologists: https://www.raiqc.com

RAIQC

Chris Mills Mar 20, 2024

@pete oh, nice!

smilebags Mar 20, 2024

@chrisdavidmills great docs! Really nicely written, thank you for the hugely valuable resource you create, even for features that don't have full support in Firefox yet! Such a valuable resource for so many people.

I noticed a small typo in "lch() they are available as h, c, and h," I assume the first letter should be 'l'.

Chris Mills Mar 20, 2024

@smilebags Thanks, I'm glad you like them.

And thanks for reporting the typo; I've fixed it like this: https://github.com/mdn/content/pull/32763

Remove typo and repetition by chrisdavidmills · Pull Request #32763 · mdn/content

Description There was a typo in the section I removed, plus it repeats the wording we gave a little way above in terms of giving examples of color functions and origin color values. Motivation Ad...

GitHub

smilebags Mar 20, 2024

@chrisdavidmills thanks for showing me how it was fixed! I tried submitting a change to some webkit docs and got completely ghosted... How often do the MDN docs get community contributions?

Chris Mills Mar 20, 2024

@smilebags We get absolutely loads of community contributions, and often struggle to keep up; it's the eternal open source struggle ;-)

If you submit any fixes in the future and don't get much response, feel free to ping me in the PR thread.

Daryl Zuniga Mar 20, 2024

@chrisdavidmills Looks great, thanks for writing this up!

I'm experiencing a flickering issue when viewing on Safari: https://github.com/mdn/content/issues/32766

Examples on page flicker white · Issue #32766 · mdn/content

MDN URL https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors What specific section or headline is this issue about? No response What information was incorrect, unhelpful, or ...

GitHub

Chris Mills Mar 20, 2024

@sprig Hey, thanks, glad you like it!

I can confirm the Safari flickering. I'll ping one of our devs about your bug and see if they have any thoughts.

Adam Argyle Mar 20, 2024

@chrisdavidmills rocks hard! worth every minute spent 🙂

Chris Mills Mar 21, 2024

@argyleink ha, cheers man!

Lord Mar 20, 2024

@chrisdavidmills ho no my browser isn't supported but i want to play with this new toy !!

Chris Mills Mar 21, 2024

@lord Hopefully coming to a Firefox near you soon! See https://bugzilla.mozilla.org/show_bug.cgi?id=1701488 for progress.

1701488 - (interop-2024-relative-color-syntax) Implement CSS Color 5 Relative Color Syntax

NEW (tlouw) in Core - CSS Parsing and Computation. Last updated 2024-05-21.

@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!

Chris Mills Mar 21, 2024

@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?

@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!

Convert a Color – HEX, RGB, HSL, CMYK

Convert colors between formats HEX, RGB, HSL and CMYK. Simple, beautiful and fast.

@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
```

Chris Mills Mar 21, 2024

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

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

Chris Mills Apr 5, 2024

@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.

@chrisdavidmills no worries!

@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

Chris Mills May 7, 2024

@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.

@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...

@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.

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 May 7, 2024

@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.

@bramus fantastic, thank you!

@chrisdavidmills

@bramus @chrisdavidmills just went looking and found this issue is still there, boohoo. I guess not enough other people are bothered by it.