I want to share this with all the backend dev's that have teased us frontend devs by saying "but you just change colors right?"

Opacity is great but being able to replace darken and lighten from scss with a way that supports custom properties is a big game changer for cleaner css (especially cleaner :root var definitions)

This is one I’ve been checking on every two weeks and started using in an @supports last month ! Makes everything so clean and more convenient so I’m not having to manually convert hex values to oklch ❤ relative colours rock!!!

I remember trying to make this work in SASS last year. 😂 Now, it's finally a feature. Nice! 🎉

There is one important thing worth noting regarding browser support that Can I Use doesn’t show: The current Safari implementation is based on an older version of the specification. This seems to be fixed in Technology Preview, but it’s not yet in stable (and I have not seen this mentioned in the release notes for the 17.6 nor 18.0 betas). The main interoperability issue between the two specs is that the current one implemented in Chrome and Firefox treats the color channel tokens as unitless values in calculations, whereas the older spec implemented in Safari gives many of those tokens an implicit unit, such as `%` or `deg`. As such, by adhering to the Safari behavior, you risk making the entire declaration in Chrome invalid and vice versa. This is only important to keep in mind when using addition or subtraction on certain color channels, since you can’t for example subtract `180deg` or `20%` with a unitless value or vice versa (but you can multiply and divide). Worth noting is also that Safari treats the channels in relative rgb colors as values between 0% - 100%, whereas in Chrome they are unitless values between 0 - 255 (still not a problem if you use multiplication or division). Relative (ok)lab colors don’t have this problem since all those channels are unitless in both implementations. Same for chroma and lightness (but not hue) in relative (ok)lch colors. It’s also worth underlining that both implementations accept unit values not inside a calc function. Luckily you can test for both behaviors using support queries. That opens up for a solution looking something like this: :root { /* Test for the correct behavior implemented in Chrome, Firefox and Safari TP */ @supports (color: hsl(from red calc(h + 1) calc(s + 1) l)) { --u-deg: 1; --u-%: 1; } /* Test for the old spec behavior in Safari. Returns false in Chrome, Firefox and Safari TP */ @supports (color: hsl(from red calc(h + 1deg) calc(s + 1%) l)) { --u-deg: 1deg; --u-%: 1%; } } .element-with-relative-color { color: hsl(from red calc(h + 25 * var(--u-deg)) s calc(l - 20 * var(--u-%))); }

I was using color-mix function for this type of things: color-mix(in srgb, red, transparent 50%) But now it’s much easier!

Absolutely love it, been waiting for something like this for years, thanks for sharing!

Amazing video! Always thankful to have someone cover on css features like this. 👍

Hey Kevin, everything you do with these videos is so great, clear and to the point... thank you... keep it up please !!!

When I just want to change the brightness of a button on hover, I normally use filter: brightness(). I find this method more convenient for such cases. However, for creating color schemes and other fancy coloring, relative colors are fantastic. Thank you for showing this. It opens up so many opportunities. Thats why i love your channel. Learning more good stuff every day =)

OMG, this! I couldn't believe this wasn't possible when I started trying to mix colors to achieve the right contrast for accessibility across several color schemes🙈Feels like CSS has been catching up with the developers' demands for yearzzz! Thanks for your great updates💚

Wow! That is just great. This is giving me a real nice color scale. Without opacity. Calculating from 68% (for this example) to 95% (really light version) in 9 steps.. --color-primary: hsl(227, 100%, 68%); --color-primary-10: hsl(from var(--color-primary) h s calc( l + (( 95 - l ) / 9) * 9 )); --color-primary-20: hsl(from var(--color-primary) h s calc( l + (( 95 - l ) / 9) * 8 )); etc...

Great video Kevin! 💜

This is great. I have been over using color-mix with transparent and a percentage to do this.

This is very cool I can't wait to use it in production

Super cool! I generally use hsl and constantly have to go and convert things. Now I can make the browser do my bidding for me

This is great! Thanks for sharing this.

Daym, this is actually a sick feature

Kevin, when you were giving examples like `rgb(from purple r r r)` or `b b b`, you said "we don't really have a lot of red in there" and the text became gray. The reason for that is very easy: if you put the same value on all rgb channels, you always get a grayscaled color.

ahh, its kind of like destructuring. so cool!

This is great. Thanks for this.

Here is another approach for hover/focus states using variables with fallback values. I think I’d prefer it in situations where declaring an extra variable for the origin color feels a bit verbose. button { background-color: oklch(from var(--clr-button) var(--bg-lightness, l) c h); &:hover { --bg-lightness: calc(l - 20); } }

This came at the right time

I literally finished my project yesterday with the same exact issue. I had a accent color but had to constantly put it's value everywhere I wanted some transparency.

This is pretty cool gotta admit

Careful adding/subtracting to color components as you can go out of gamut limits quite quickly e.g. oklch(from red l calc(c + 1) h). Prefer using multiply and divide.

Wow 😖where was this years ago... I had to use SASS and some hacky way of splitting the HSL in each variable 😭😪... thanks Kevin

It's so pretty

Right on the money!

wow, now you can create shaders!

You speak about CSS with such ease, despite a lot of the things having a skill curve of, "oh boy, I am going to need a separate video before I continue". That is the mark of the master.

It would be interesting to see if you could make a full 3 or 4 color palette based on a single color tweaked up and down.

OMG, it's just crazy) Kevin, can you advise something to read/watch about hsl and all this "weird" color functions? I where I could understand how this works) p.s you are a css monster and I happy that KZfaq algos gave me your channel) hope one day I'll bought your course and say you thanks this way for all your job

I have a feeling css syntax is gonna be assemblish soon :)

So, can we sunset sass like with lodash? Both great products. Both advanced the developer experience. And both no longer necessary

I have a question. I'm trying to understand the behavior of REM units when used for element positioning. While pixels (px) maintain a fixed position regardless of font size, using REM seems to lock the element's screen position and it is a good thing but i don't know if it is applicable to every scenario. I expected REM unit to cause some shifts in positioning based on the root font size. Can someone explain the relationship between using REM for positioning and how it affects an element's screen location?

Hey Kevin, go look at the browser support link again? It's different than what you're showing in the video. They are all marked as partial support now...?

Can you make a video about vw vs w unit, why does vh used in height when creating a page website but not vw for width? I rarely see vw unit being used for width and percentage are frequently used over it. Im a html/css beginner

This actually is a game changer. Except I need functions to completely replace my SASS madness color variant generator

Even though I like this for most cases and would use it on something like a blog. I feel like it has maintainability issues in the long term. Colors can change from season to season and due to how accessabilty works with colors this might not work for that. Not saying you can not edit all of the things per season, but it sort of goes back to the pre-way to do this stuff before.

Can we also calculate margins, paddings ..

Can I ask for a good book or video course on modern css please? All cool stuff in one place

i was watching your videos for a while and i never heard you talking about lch and oklch.....this is my first time hearing them can u please make a simple video about them

Isn't there a way like using: color-mix(in srgb, var(--clr-brand) 20%, transparent); ?

Can you make the yellow button turn from black text to white text automatically if the contrast isn't high enough inside the hover state?

They keep adding more and more things to CSS. I think almost all of the added things are good but I do worry that we're heading towards a Franken-CSS monster with so much complexity that new web devs will be unable to learn enough for CSS to be a useful tool.

CSS is getting more amazing. It is sad that companies are going the tailwind route.

Where's the postcss plugin?

I really wonder from where to start on your channel???

I think tailwind made them even easier :D

Oh, I use it in TailwindCSS with --picked-color and deep/bright/neon/pastel versions of it with options to add/multiply lightness and chroma and rotate hue over oklch!

Thanks Kevin, this is awesome, but I'm confused about 1 thing...why is it divide and not multiply? For example, if we take 200 and divide by 50%, that becomes 400, which is actually an increase in the values. Note - referring to the first part of the video.

And the fun part about covering CSS based on a working draft, a new feature was added to the working draft so now the CanIUse chart looks a lot worse despite the fact that the new feature is the only thing not covered in most browsers. The new feature? You can use currentColor or a system-color as your origin color.

Not sure where the win is over what I was doing before. Literally, the CSS on my company page: --root-hue: 165; --base-hue: var(--root-hue); --contrast-hue: calc(var(--base-hue) + 180); --alternate-hue: calc(var(--base-hue) + 90); --base-color-100: hsla( var(--base-hue), 100%, 1); --base-color-90: hsla( var(--base-hue), 90%, 1); ... --contrast-color-90: hsla( var(--contrast-hue), 90%, 1); And the HTML looks like this: Hello World Click me A simple change to --root-hue recolors the entire page in a consistent way, and it will always look good.

Css God)

css is turning into a programming language

Bye-bye hsl, welcome color-mix! Finally

6:37 wdym except for firefox? You can clearly see it is in firefox 128 - 130. I don't understand.

Still seems cumbersome

*SO* weird syntax that one have to DIVIDE by 0.5 or 50% to get half the opacity 😳 It should be MULTIPLY instead.

Why does it feel like CSS is becoming more like JS. 🤔

Love the functionality, but the syntax ... yikes!

It's very verbose and complicated, Sass has better tools and even solves it better, but css is on the right way

While these new color opportunities are kind of amazing, I find myself struggling using them effectively. 🫠 What I mean is: I‘m doing CSS for almost two decades now. And Hex and RGB(A) is so embedded in my mind, that I don‘t think about hsl or other stuff when it actually would make sense. At least, I‘m starting using color-mix(), though. Kevin, if you‘d like, a beginners video about all color related options would be great. 😊 (As a non-English-native speaker, I can‘t even grasp what the basic idea of hsl really means (is it hue, saturation and lightning?) And how it‘s affecting my color. While with rgb, obviously it affects the main three colors. That is my problem really. 😢)