A deep dive into CSS color-mix()

[@ScottMackey]

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 😁

[@tumbler9428]

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.

[@RobBulmahn]

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.

[@JonHaa87]

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.

[@niner8275]

This "in [colormodel]" should also be an option for CSS color gradients.

[@KevinPowell]

It is, I have a video coming on that next month sometime, but you can do `linear-gradient(45deg in lch, red, blue)` 😁

[@Mr.RobotHead]

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.

[@UmzGames]

Brilliance. Not just the CSS knowledge, but the use-case example.

[@calyodelphi124]

Based on your demonstrations I think I like the way the srgb model does color mixing even better than oklab.

[@kalechips22]

CSS is literally just turning in to SASS now

[@ssava_ema]

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 💪💪💪

[@Evangelist45938]

A new video from kevin lets GOOOOO!!

[@clevermissfox]

I had just watched the theme picker video! The color mix to acheive these different thrmes is perfect!!

[@techyjc]

LAB - L= Luminance A = Tint (magenta / green) B = Temperature (yellow / cyan) for reference. OKLab is similar and slightly better from what I understand.

[@JosephCodette]

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

[@papayoulele]

You are a true source of inspiration and development. Thx for all

[@ozanmuyes]

Adam Argyle rocks, as you do 🤘🏻

[@kirillzlobin7135]

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

[@Mikael97]

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.

[@suzubraz]

Thank you! Learned something new!

[@balogunmuhammadawwal1316]

Oh Thanks amazing I can't wait to watch your video on gradient with color mix You really help me project to stand

[@aurelian3401]

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

[@sanmeetsingh4538]

Wow its so awesome like creating a theme feels so easy now !

[@LidyaMartinez-d8j]

As a web designer.... color is really a great advantage

[@itsPenguinBoy]

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.

[@inonaraphael]

I loveeee CSS ❤

[@ahmadbayrakdar]

wow, thank you

[@mivids100]

I just want to be half as good with css as you!

[@goodshiro10]

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😅

[@mh_kohansal]

thank's

[@Atractiondj]

Why we can't do - oklch(from currentColor calc(l - 20) c h) for hover color for example?

[@thedacian123]

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!

[@dannycho2287]

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?

[@feldinho]

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. :)

[@KevinPowell]

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

[@akshaymali4732]

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

[@shanappy7041]

Hi kewin. ❤

[@KevinPowell]

👋

[@azuma12]

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

[@KevinPowell]

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

[@riaddjaid7428]

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 ?

[@khadarvali5782]

Grear

[@SebastianZartner]

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.

[@KevinPowell]

Thanks!

[@thorerik]

@@KevinPowell If you swapped color-1 and color-2 you'd see the difference really easily btw

[@XCanG]

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

[@kosmar]

i prefer oklch. happy to fight

[@KevinPowell]

I prefer it for declaring colors, since I sort of know what I'm going to get! For mixing, it depends 🤷

[@kosmar]

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