Thank you, I didn't know this one yet. Browser-support seems to be OK. Provides a very fast & easy way to get light and dark shades of your primary colors, or to easily produce consistent color variations.
I think srgb mixing looks better; oklab was giving some weird shifts occasionally in your examples, but srgb was always pretty much what I'd have expected it to produce.
Maybe you're used to srgb because that's what most simple graphics programs use, but I recommend reading some articles about the advantages of oklab. There are also a lot of issues when mixing srgb colours, for example when mixing blue with white, those light blues often look purplish and oklab corrects that. One minor issue with oklab is that darker colours are often very dark, but that's by design and not an error, but you might need to adjust for that.
Personally I've chosen OKLCH with it better supporting contrast for accessibility. Future of css color seems to be aiming for either something close to OKLCH or OKLAB. They offer HDR colors for the web, so much better than our current SDR options. 84% current browser support is very good, that includes most of the main browsers we really care about too. Thanks for another great video Kevin 😁
I just used `color-mix()` for the first time this week, and I really didn't grok the color mode (but got things working nicely). I really appreciate the info you presented on those.
Another awesome content just got two concepts in one video. I didn't know that I can actually switch between themes/modes using the :has() pseudo class. Thanks Kevin for always producing quality content on CSS I believe am the next CSS monster 💪💪💪
It seems like advanced css function colours. I need to read your code and documentation and practice in order to get a better understanding, anyway, great tutorial. Thank you.
LAB - L= Luminance A = Tint (magenta / green) B = Temperature (yellow / cyan) for reference. OKLab is similar and slightly better from what I understand.
Since you asked yes please more videos about color tweaking . Especially color schemes that are usable (no offense!) , because that seems to be the hardest after deciding which colors you want a site to have . Also having shadows that work well with the scheme is a tedious task sometimes
This is amazing Can you make a video on what features are left in SCSS that are not supported by regular CSS It looks like regular CSS already has almost everything
You can see how the default hue for white and black is red, even though the hue value is meaningless when saturation is zero. So in the hue based mixing, mixing anything with black or white has a redish tint.
Does using these css functions has any impact on performance I know it wont be that much, but still is it ok if i use them extensively in a actual project
Hi sir please I'm working on a website that shows a lot of videos using html CSS and javascript and I want to stock the paths of videos on a JSON file, when I put the path directly to the html file without live server and open the page it works fine but when I use JSON method and open it with live server the video doesn't work and immediatly open download manager , all my videos are local. where can I find an answer for my problem ?
Follow Adam Argyle, Una Kravetz, and Bramus on socials, who are on the Chrome dev rel team and always share upcoming stuff. I also look at the release notes when a new browser version comes out to see what's included. Probably some other stuff I'm forgetting
I have two remarks please: 1 .color-mix >:nth ,would not be much clear .colormix >div or colormix>* 2 In order to have a good grasp how these color mixing modes work we should have knowledge of complicatted color theory. Thank you!
Trying it again, because my comment somehow got eaten. `shorter` and `longer` refer to the smaller or larger angle around the color circle, while `increasing` and `decreasing` mean whether to strictly increase or decrease the hue angle, i.e. whether to go clockwise or anti-clockwise around the color circle.
A few weeks ago I made a palette generator in SASS for a client project and I think the results are very nice, and it overlaps with the theme of this video. Would you be interested in checking it out? Just let me know so I can put it on a codepen. :)
Why? Why does they accept bugged behavior as standard? Why don't they tell that it need to be fixed, so that browser may be have 1 or 2 versions with a bug, but the rest newer ones will be fixed? Now it will be branded forever...
Thank you, I didn't know this one yet. Browser-support seems to be OK.
Provides a very fast & easy way to get light and dark shades of your primary colors, or to easily produce consistent color variations.
I think srgb mixing looks better; oklab was giving some weird shifts occasionally in your examples, but srgb was always pretty much what I'd have expected it to produce.
Maybe you're used to srgb because that's what most simple graphics programs use, but I recommend reading some articles about the advantages of oklab. There are also a lot of issues when mixing srgb colours, for example when mixing blue with white, those light blues often look purplish and oklab corrects that.
One minor issue with oklab is that darker colours are often very dark, but that's by design and not an error, but you might need to adjust for that.
Personally I've chosen OKLCH with it better supporting contrast for accessibility. Future of css color seems to be aiming for either something close to OKLCH or OKLAB. They offer HDR colors for the web, so much better than our current SDR options. 84% current browser support is very good, that includes most of the main browsers we really care about too. Thanks for another great video Kevin 😁
I just used `color-mix()` for the first time this week, and I really didn't grok the color mode (but got things working nicely). I really appreciate the info you presented on those.
Brilliance. Not just the CSS knowledge, but the use-case example.
This "in [colormodel]" should also be an option for CSS color gradients.
It is, I have a video coming on that next month sometime, but you can do `linear-gradient(45deg in lch, red, blue)` 😁
I had just watched the theme picker video! The color mix to acheive these different thrmes is perfect!!
CSS is literally just turning in to SASS now
You are a true source of inspiration and development. Thx for all
Another awesome content just got two concepts in one video. I didn't know that I can actually switch between themes/modes using the :has() pseudo class. Thanks Kevin for always producing quality content on CSS I believe am the next CSS monster 💪💪💪
Based on your demonstrations I think I like the way the srgb model does color mixing even better than oklab.
Oh
Thanks amazing
I can't wait to watch your video on gradient with color mix
You really help me project to stand
Adam Argyle rocks, as you do 🤘🏻
It seems like advanced css function colours. I need to read your code and documentation and practice in order to get a better understanding, anyway, great tutorial. Thank you.
LAB - L= Luminance A = Tint (magenta / green) B = Temperature (yellow / cyan) for reference. OKLab is similar and slightly better from what I understand.
A new video from kevin
lets GOOOOO!!
Since you asked yes please more videos about color tweaking . Especially color schemes that are usable (no offense!) , because that seems to be the hardest after deciding which colors you want a site to have . Also having shadows that work well with the scheme is a tedious task sometimes
Wow its so awesome like creating a theme feels so easy now !
This is amazing
Can you make a video on what features are left in SCSS that are not supported by regular CSS
It looks like regular CSS already has almost everything
Thank you! Learned something new!
As a web designer.... color is really a great advantage
Before 2000 was used "safe colors", a mix between 0, 3, 9, c, and f. Probably browsers didn't know how to display other combinations. 🙄
I just want to be half as good with css as you!
I loveeee CSS ❤
Is there a way to know the values (hex, rgb, whatever) of the resulting colors? Or do I have to use color-mix to reproduce these colors?
wow, thank you
You can see how the default hue for white and black is red, even though the hue value is meaningless when saturation is zero. So in the hue based mixing, mixing anything with black or white has a redish tint.
Does using these css functions has any impact on performance
I know it wont be that much, but still is it ok if i use them extensively in a actual project
Why we can't do - oklch(from currentColor calc(l - 20) c h) for hover color for example?
Hi sir please I'm working on a website that shows a lot of videos using html CSS and javascript and I want to stock the paths of videos on a JSON file, when I put the path directly to the html file without live server and open the page it works fine but when I use JSON method and open it with live server the video doesn't work and immediatly open download manager , all my videos are local. where can I find an answer for my problem ?
hey, Kevin been enjoying your channel so far :) could u tell me like from where to get updates about css and things just like you do..
Follow Adam Argyle, Una Kravetz, and Bramus on socials, who are on the Chrome dev rel team and always share upcoming stuff. I also look at the release notes when a new browser version comes out to see what's included. Probably some other stuff I'm forgetting
so whenever we create variables for shades of colors, we don't need to copy bunch of hex codes or rgb stuff, simply adjust the percentages😅
I have two remarks please:
1 .color-mix >:nth ,would not be much clear .colormix >div or colormix>*
2 In order to have a good grasp how these color mixing modes work we should have knowledge of complicatted color theory.
Thank you!
Hi kewin. ❤
👋
thank's
Trying it again, because my comment somehow got eaten. `shorter` and `longer` refer to the smaller or larger angle around the color circle, while `increasing` and `decreasing` mean whether to strictly increase or decrease the hue angle, i.e. whether to go clockwise or anti-clockwise around the color circle.
Thanks!
@@KevinPowell If you swapped color-1 and color-2 you'd see the difference really easily btw
A few weeks ago I made a palette generator in SASS for a client project and I think the results are very nice, and it overlaps with the theme of this video. Would you be interested in checking it out? Just let me know so I can put it on a codepen. :)
Sure thing 🙂
Might be best to share it in my Discord though, if you have an account, I miss replies to comments in YT a lot of the time
Grear
Why? Why does they accept bugged behavior as standard? Why don't they tell that it need to be fixed, so that browser may be have 1 or 2 versions with a bug, but the rest newer ones will be fixed? Now it will be branded forever...
i prefer oklch. happy to fight
I prefer it for declaring colors, since I sort of know what I'm going to get! For mixing, it depends 🤷
@@KevinPowell from what i read LCH or HCL is corrected for equal perception of lightness, so that 50 red and 50 yellow look right next to each other.