[Go Make Things] Mixing colors with CSS

By rahmat hidayat

Monday, April 28, 2025

​ Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter. I'm working on a UI library for people who love HTML, powered by modern CSS and Web Components. Unlike previous projects of mine, I'm not using Sass at all. I want the whole thing to work with plain old vanilla CSS. One of my favorite things I used to use Sass for was darkening or lightening a color to get the :hover color. I gave that up when I switched to a build-free process. Or did I? Last week, I learned about the color-mix() CSS function. As the name implies, it lets you mix two colors together. For example, let's say my button elements had a background-color of #0088cc. I could use the color-mix() function to add a little black to the color to darken it up a bit. button { background-color: #0088cc; color: #ffffff; } button:hover { background-color: color-mix(in oklab, #0088cc, #000000 20%); } Here's a demo. The color-mix() function accepts three arguments: The color-interpolation-method to use. For our purposes, we generally want in oklab (though I'll confess the theory and math on this kind of thing is beyond me). The base color. The color to mix into it. Both the base color and color to mix in support a percentage, the amount of that color to use. If only one color has a percentage, the other color uses 100% minus that percentage as its value. If neither has a percentage, 50% is used for each. If the two add up to more than 100%, the it uses some math to normalize the two values. The color-mix() function hit baseline in 2023, and currently has support in about 92% of browsers globally. Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying. ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25 or just use ConfigCat's generous free tier. Definitely worth checking out.> Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme