Using currentColor with color-mix is amazing
HTML-код
- Опубликовано: 13 июн 2024
- Looking to step up your CSS game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ Intro do color-mix(): • A deep dive into CSS c...
✅ color-mix() browser support: caniuse.com/mdn-css_types_col...
⌚ Timestamps
00:00 - Introduction
00:48 - A simple example of using color-mix() color-mix
02:50 - Using it for higher-contrast links
05:20 - A more advanced use-case
08:30 - Combined with light/dark modes
10:00 - prefers-contrast
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![PADDINGTON IN PERU - Official Trailer [4K] - Paddington Bear is back!](http://i.ytimg.com/vi/lKgitu25ZAg/mqdefault.jpg)
Quick SVG trick:
To easily adjust SVG colors without directly modifying the fill property, set the fill attribute to 'currentColor'. Then, by adjusting the color property of the SVG's container, you can dynamically change its color!
Nice! Thanks for sharing this
note, for those who may not know, this only works with inlined SVGs, not those inserted via the tag
@@jaydee-222 also, it's nice to use - this way SVG's are cached in one file and used in html with relatevily low overhead.
I use this all the time! When i clean up the code of an SVG, i always set the fill attribute to 'currentColor'. By far the cleanest way!
I usually color SVGs by making them the mask-image of a container with a set background
I love using color-mix() with `color-scheme: light dark` plus currentColor, Canvas, and other s! I've been building an internal web-based tool at work and I haven't specified a _single colour_ manually, because everything uses system colours and looks right at home on whichever OS or theme the user has. I also love `font-family: system-ui` for that reason!
A video series on the tools of the trade would be very welcome!
Definitely want a video about dev tools stuff! Awesome, as always btw😊
would also love a video about the dev tools!
I'd love 2 as well
While all this is great, I myself cannot wait for the issues with color-contrast() to get ironed out! Having text color accessibility automatically managed by CSS will be a game-changer! I wrote a smallish Sass library that did sort of the same function and it was great (though I don’t really use it anymore).
omg yes! It's a bit annoying because it's one of those things that all the browsers *could* do pretty easily right now, but I also understand they want to get it right, since once it comes out, that's what we have. But yes, I would *really* like to have it too :D
Would love a video on the rendering settings in the devtools! Always been curious about them but never gotten around to taking a deep dive
I'm so glad you're talking about accessibility and contrast. On my phone I have colour filters bound to triple-clicking the power button because so many websites use low contrast colours that I literally can't tell apart.
You always put out videos when i happen to be doing something on that issue, i am currently building myself a color pallet of the various color schemes and i was looking into currentColor during my research, thought about it for a second, but now i think i will try to incorporate it into my designs, i like color and i like shadow effects, and using contrast to highlight elements, so this could be a very useful tool that would allow me to use my creative nature quite well, thanks Kevin.
Would definitely love a deep-dive into the emulation settings!
Me too!!
I always appreciate how you focus on accessibility. I feel like so many who undermine it in their tutorials.
I'm probably off topic here, but I wander if you can do a tutorial for accessible dropdown menu. I've been looking for it, and couldn't find a single one that's useful, and I thought no one would do this better than you anyway... 🙏🙏🙏
Could definitely be something worth looking at 👍
Really useful feature!! And using the amounts as custom properties, we can easily change darkness amount just scoping the css variable.
love this! genius to use custom variables like this, can always automagically get the contrast / mix color.
would love a video on advanced dev tools like the rendering tab.
that's so awesome. thanks kevin!
A trick I used a couple of years ago to give links a semi-transparent background matching the text color was to give it an extremely tall background gradient (which the link is in the middle of) from currentColor to transparent.
Nice trick!
Thank you so much Sir ❤ You are G.O.AT of front end development 😊
For some reason I always thought it was orangered as opposed to orange-red. And it made me chuckle. Now it’s css that chuckles at my stupidity
Great Video!!!
Just a quick Dev-tools tip, pressing the 'Escape' key will toggle the drawer where the Rendering tab is.
pretty neat indeed!
ur a a legend!!
Ahhh very cool! Just the other day I was wondering if there was a way of doing this
Yes do a video on rendering please
Thanks!
Thank you so much!
Normally for Lighter / Darker content segments I usually put one color and let transparency blend the dark value underneath towards a white or black transparent box.
But I would much rather replace that with this, because it brings some other issues along with it when using transparency. This is perfect for my use case.
CSS Color Module Level 5 also has relative color syntax which I feel is even more powerful, can use calc-functions to change the values of another color in any color space. Very easy to do things like make something more or less transparent, more or less saturated or even invert a color completely. But it is sadly not yet supported in Firefox.
Yup, the relative syntax is fantastic as well. It's a little cumbersom, but *very* powerful. Just wish we could make loops like with Sass, as it'd be a lot faster to make a quick color pallet 😅
It's supported in Chrome, but it doesn't work with currentColor apparently because the spec forgot to test it 😂
relative color syntax wasnt working with currentColor, this is great
Really good video, thanks a lot !
One little question, what is the pointer tool you use at @3:16 please ?
In Chrome (and firefox), the select element thing in your dev tools. Just, instead of clicking on something, you just hover over it :)
I had no idea you could use color-mix WITHIN the border-color property!! I love this channel. Great video and always learn something@
@@Turabbo awesome !!
Thanks for yet another jewel of a video!
You mentioned style queries could take care of this...
Understood, style queries are not 100% supported yet, but I like to progressively enhance my work.
Any examples or resources?
This is a great starting place: developer.chrome.com/docs/css-ui/style-queries
What is the extension you are using to have the contrast or other useful information on inspection?
Do you have some other extensions to share?
No extension, it's built into Chrome (and Firefox). The select element thing in the dev tools, when you use it, and hover over something (don't click on it) it shows the contrast. Doesn't work for elements with background images or gradients though.
@@KevinPowell Hmmm... I'm not seeing that in Firefox. I get a popup of the element with all its selectors, as well as the dimensions, but no info on contrast :(
Does color-mix work on background-color? Someone in the comments on another vid said it should work anywhere you can define a colour but i wasnt getting anything when i tried background-color: color-mix(in rgb, white, deeppink); for example
Huh, color-mix IS working on your "background" property; couldnt get it to work on "background-color" though... i wonder if i was doing something wrong or if its only recignized as a background-image or aomething like a gradient
İmpressive. Thanks
Can you do current background color in the color mix too? That could help with switching dark and light theme, right?
No way to access the current background color the way we can use currentColor, but you could use custom properties for that :)
thanks for another useful content mr Kevin! Do you have a plan to release another design to code content? they're very useful! 😊
Yup, will have one soon-ish :)
@@KevinPowell cant wait for that thank you so much as always!
Interesting. I always took it for granted that I couldn’t use currentColor as an argument to color-mix() for the color property. It doesn’t make sense really. Because currentColor is the color… so how can I mix with it?
currentColor is what it is *before* the mix :D
Isn't there color-contrast as well with new color 5 syntax. Not sure about support, but it accepts a list of colors and uses one that passes the contrast ratio.
It's in the works, but it's sort of in limbo at the moment. The current method for calculating contrast is a bit flawed. The raw numbers don't always match the percieved contrast... Afaik, they're still trying to figure out what the best method is to use, under the hood, and it seems to be taking awhile...
How are you accessing the accessibility in the popup when you hover? Chrome option?
It's built it to the inspector thingy... I wish I knew the name, lol. In the dev tools, the top left tool that is an arrow pointing into a dotted box. Select that, then hover over elements. Firefox has one too.
found it, thanks - wish I knew about it long ago!@@KevinPowell
I am not a fan, not of the feature, but of this trend which consists of defining colors during development. This is the designerp's job.
Now for things like form elements which can have a LOT of different intermediary states I totally get that you can be forced to generate color variants, but I really think having an array of predefined colors is superior in terms of branding, and I would like there to be a better way of doing it than using indices like primary-500
I agree that it's the designers job, but the designer *can* take advantage of this. We've had tools like this for *decades* with pre-processors, and large systems have long used them (Bootstrap is the first thing that comes to mind, which uses SCSS mix(), which is very similar).
@@KevinPowell I agree designers, even when doing design for print, mix colours to generate shades, etc. and having a way to express that in code could make this process more transparent, but it's not going to because - and I deplore it - developers don't use abstractions when they write CSS, especially when they use tools like Tailwind. They code in tactical mode, the rules underlying the design, even the brand, escape them, even when they have a keen eye for things like spacing, hierarchy, etc. and care deeply about doing a proper job.
I have been in both sides of the divide, as you have if I recall, and never was I able to agree on a ubiquitous language for states and colours and stuff like that with devs because the idea that there was even a conversation to be had about this did not come to their mind. They don't see a "domain" in the brand, "business rules" in the style guide or design system. Design is a coat of paint to make things look proper and does not deserve attention.
I realise I was essentialising a group of people and I don't like that. It's a symptom of my recent experiences which made me "lose faith" a little bit. Your viewers are kind of a living proof that I am wrong because you talk about these topics, at least indirectly, a lot
I wonder what its value really is in the context of a site where users can select their own color theme.
Choosing the right combination of colors for a theme demands a lot more than just diluting, darkening or mixing in some other color. Color combos have to be selected based on the degree of interest they have relative to each other. And of course relevance to the site subject.
This tool might be alright for mild contrast but it's too limited for serious work, I feel.
It's just one tool at our disposal, but one that a lot of big systems have used well. Bootstrap uses the Sass version ( the mix() function) quite a lot, as an example. We also have a relative syntax, where you can adjust one (or several) parts of a color, so increase/decrease lightness or saturation, or shift a hue... and use calc() for it all, so it opens up a lot of possibilities.
Wouldn't you be able to leak history state for links using this current state mix?
I don't see how? 🤔
@@KevinPowell give visited links a different color but make it through an ungodly ammount of chained mixes. Then try for a timing attack.
New room? :)
not me thinking it was "fun time friends" all this time??
KEVIN IS GOD!!!!
I am editing this comment again.
HE IS GODLIER, GODLIEST!!!!
sadly i would say color-mix is not for real-world scenarios, as graphic designers use their perception not math to design color versions of components.
Some* designers do. and they will be left in the past
Totally depends. Sometimes you'll be working with a tight and very perscribed design system... but as the web evolves, and with new things like color-mix() and the eventual contrast tools, and other things that are on the way, those design systems are, most likely, going to start using these types of things as well.
Also, we've been able to mix colors with pre-processors for a long time now, and I've seen it widely used, including with large systems like Bootstrap, and others. We're just moving those tools from pre-processors to the core language now.
3
2
Sass
Yup, something we've long had with Sass! The nice thing here is it works with custom properties, which is handy.
4