color-mix() for color transparency / TIL / From the Python and Django developers at Lincoln Loop

You can use CSS's color-mix() function to generate transparent colors for your color palette on the fly. This is useful for effects, borders, or subtle backgrounds. I've found it helpful when I am working with CSS variables, as I don't have to duplicate original color values.

These days, I am still working in the sRGB color space. Here's an example of a border between list items that is based on a brand color, but is 90% transparent:

.posts li + li {
  border-top: 2px solid color-mix(in srgb, var(--brand-color), transparent 90%);
}

This provides a subtle separator between my blog posts.

This is a great way to keep your CSS DRY and maintainable, and inject cohesive color in your designs without adding more variables.