# Using color-mix() to create opacity variants

DevFeed: [Using color-mix() to create opacity variants](<https://devfeed.tech/articles/using-color-mix-to-create-opacity-variants-28783.md>)

Original publisher: [Read original article](<https://una.im/color-mix-opacity/>)

Published: 2023-03-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [color](<https://devfeed.tech/topics/color.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browsers](<https://devfeed.tech/topics/browsers.md>)

Tags: [browsers](<https://devfeed.tech/tags/browsers.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [experimental](<https://devfeed.tech/tags/experimental.md>), [firefox-nightly](<https://devfeed.tech/tags/firefox-nightly.md>), [guide](<https://devfeed.tech/tags/guide.md>), [safari](<https://devfeed.tech/tags/safari.md>)

## AI overview

This tutorial explains how CSS color-mix() can create semi-opaque variants of brand colors by mixing them with the transparent color value. It also discusses browser support, color spaces, and a related DevTools demo.

## Source excerpt

Build an alpha color system without splitting out channels using this one neat trick.