Menü schliessen
Created: December 11th 2024
Last updated: February 28th 2025
Categories: Common Web Development,  CSS,  IT Development
Author: Tim Fürer

CSS: Change Opacity of Given Colour

Tags:  CSS,  guide
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Using the new color() CSS function, one can modify a given CSS colour's properties. This includes R (red), G (green), B (blue), and even alpha (transparency) values.

Color() is Baseline available since May 2023. According to caniuse.com, as of writing this article, more than 95% of tracked browsers support the feature.

Usage

Here's an example using color() to set a colour's (#a24a9d) opacity to 50%:

color(from #a24a9d srgb r g b / 50%)

"srgb" defines that the sRGB colour space (which is standard for the web) is to be used. Notice how "r", "g", and "b" are used as placeholders to signal that those values should remain as they are.

You can even use the color() function to, for example, adjust the opacity (or any property really) of a colour from a CSS variable:

color(from var(--some-color) srgb r g b / 50%)