🧪 CSS Lab #2: I got the blues

Did you know CSS can auto-generate matching tones from a primary color?

Mina Pêcheux
CodeX

--

As a solo web dev or a web designer, a big part of your job is making your site’s or app’s interface both pretty and intuitive. And although they are a lot of techniques to doing that, an essential one is, of course, choosing the colors.

Mix-and-matching colors the right way is key to having a strong brand identity and a visually appealing user experience, because colors are linked to emotions, and thus set the whole tone for their journey in your world!

So, today, I want to discuss a great CSS tool that makes it quite easy to create matching colors quickly: the brightness() filter function.

What is it?

Here’s an overview of the feature, directly from the MDN web docs:

The idea is to apply some percentage of luminosity to the original color to get a darker or a lighter tint.

The amount can be written as a percentage (e.g. 40% ) or as a 0–1 ratio (e.g. 0.4). A value below 100% will darken the color, while a value above 100% will lighten it.

--

--

Mina Pêcheux
CodeX

I’m a freelance full-stack web & game developer. I’m passionate about topics like CGI, music, data science and more! Find me at: https://minapecheux.com :)