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.

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

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

[@UmzGames]

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

[@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)` 😁

[@clevermissfox]

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

[@calyodelphi124]

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

[@techyjc]

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

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

[@papayoulele]

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

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

[@Evangelist45938]

A new video from kevin lets GOOOOO!!

[@ozanmuyes]

Adam Argyle rocks, as you do 🤘🏻

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

[@balogunmuhammadawwal1316]

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

[@LidyaMartinez-d8j]

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

[@sanmeetsingh4538]

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

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

[@suzubraz]

Thank you! Learned something new!

[@kalechips22]

CSS is literally just turning in to SASS now

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

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

[@Atractiondj]

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

[@mivids100]

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

[@ahmadbayrakdar]

wow, 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?

[@inonaraphael]

I loveeee CSS ❤

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

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

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

[@mh_kohansal]

thank's

[@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😅

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

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

[@shanappy7041]

Hi kewin. ❤

[@KevinPowell]

👋

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

[@khadarvali5782]

Grear

[@Romaha_Rosomaha_ua]

Диз не за відео, а за тещо висвітився список відтворення з цим відео на головній, з неможливістю з ним взаємодіяти, тобто неможна нажати 3 крапки і сказати не цікавить, єдина можливість його видалити це поставити диз, ви тут не причому, це питання більш до ютуба, який вставляє освітній контент на головну і його неможна видалити

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