How to set opacity of background color given hex css variable

[StevenTCramer]

I am trying to set the opacity of the background-color for the following:

<FluentLabel Class="w-full" Style="background-color: var(--neutral-layer-1);">

The following to work correctly requires --neutral-layer-1 to be in rgb format.

<FluentLabel Class="w-full" Style="background-color: rgba(var(--neutral-layer-1), 1);">

I want to stick with the vars because I want the theme to work when I switch between light and dark modes.

I'm getting better with FluentUI... liking it very much. Thanks for the great work.

Just to be clear I am not trying to set the opacity of the element itself but the background-color.

[vnbaaij]

According to our friendly AI bots, you'll need to convert the var(--neutral-layer-1) into an RGB triplet first for this to work. Unfortunately, that does not seem to be possible in CSS itself 😟.

[StevenTCramer]

Thanks Vincent. Yep, same thing I found. There is no HexToRGB method in css :(

[c0g1t8]

@StevenTCramer

Another approach is to use color-mix() with transparency which will give you an equivalent effect. This function is newly available as of 2023.

background-color: color-mix(in srgb, var(--neutral-layer-1), transparent 70%);

Below is the experiment I did to confirm

<style>
    :root{
        --rgb-Color: 251, 251, 251;
        --hex-Color: #fbfbfb;
        --hex-ColorWithAlpha: #fbfbfb4d; /* 4d is equivalent to 0.3 for opacity */
    }

    .container1 {
        background-color: rgb(var(--rgb-Color));
    }

    .container2 {
        background-color: rgba(var(--rgb-Color), 0.3);
    }

    .container3 {
        background-color: var(--hex-Color);
    }

    .container4 {
        background-color: var(--hex-ColorWithAlpha);
    }

    .container5 {
        background-color: color-mix(in srgb, var(--hex-Color), transparent 0%);
    }

    .container6 {
        background-color: color-mix(in srgb, var(--hex-Color), transparent 70%);
    }

    .container7 {
        background-color: color-mix(in srgb, var(--neutral-layer-1), transparent 0%);
    }

    .container8 {
        background-color: color-mix(in srgb, var(--neutral-layer-1), transparent 70%);
    }
</style>

<div style="background-color:steelblue;padding:24px;">
    <FluentLabel Class="container1">Label</FluentLabel>
    <FluentLabel Class="container2">Label</FluentLabel>
    <FluentLabel Class="container3">Label</FluentLabel>
    <FluentLabel Class="container4">Label</FluentLabel>
    <FluentLabel Class="container5">Label</FluentLabel>
    <FluentLabel Class="container6">Label</FluentLabel>
    <FluentLabel Class="container7">Label</FluentLabel>
    <FluentLabel Class="container8">Label</FluentLabel>
</div>

The output is

[StevenTCramer]

Awesome thank you.