Я понимаю, что автор вопроса не использует препроцессор, но мне было бы полезно, если бы следующая информация была частью ответа здесь (я не могу оставить комментарий, иначе я бы прокомментировал ответ @BoltClock).

Если вы используете, например, SCSS, то приведенный выше ответ будет неверным, так как SCSS пытается скомпилировать стили с использованием функции rgba()/hsla(), специфичной для SCSS, которая требует 4 параметра. Однако rgba()/hsla() — это также нативные функции CSS, поэтому вы можете использовать интерполяцию строк, чтобы обойти функцию SCSS.

Пример (действителен в sass 3.5.0 и выше):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* Это валидный CSS, но при компиляции в SCSS приведет к ошибке */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* Это валидный SCSS, который сгенерирует заданный выше CSS */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

Обратите внимание, что интерполяция строк не будет работать для функций SCSS, не предназначенных для CSS, таких как lighten(), поскольку сгенерированный код не будет функциональным CSS. Тем не менее, это будет все еще валидный SCSS, поэтому при компиляции вы не получите ошибок.

Я столкнулся с похожей ситуацией, но, к сожалению, предложенные решения не сработали для меня, так как переменные могли быть любыми: от rgb до hsl, hex или даже названий цветов.

Я решил эту проблему, применив background-color и opacity к псевдоэлементу :after или :before:

.container {
    position: relative;
}

.container::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

Стили могут потребовать небольшой корректировки в зависимости от элемента, к которому должен применяться фон.

Также это решение может не сработать везде, но, надеюсь, оно поможет в некоторых случаях, когда другие варианты не доступны.

Правка: Я только что заметил, что это решение также влияет на цвет текста, так как создает элемент в передней части целевого элемента и применяет к нему прозрачный фон.

Это может быть проблемой в некоторых случаях.

Это сработало для меня...

:root {
  --color: #f0f0f0;
  --opacity: 0.5;
}
.myclass {
  background-color: rgb(from var(--color) r g b / var(--opacity));
}

Обратите внимание на использование переменных CSS для задания цвета и прозрачности. Это позволяет легко управлять стилями и делает код более читаемым.

Вы можете использовать функцию color-mix(), чтобы смешивать ваш цвет с прозрачным:

html {
  --color: #8A9B0F; /* основной цвет */
  
  /* настройте процент прозрачности, изменяя 25% */
  --new-color: color-mix(in srgb,var(--color),#0000 25%);
  
  /* для иллюстрации */
  background: linear-gradient(90deg,var(--color) 50%,var(--new-color) 0);
}

Более детально об этом вы можете прочитать в моем блоге: https://css-tip.com/color-shades-color-mix/

Преимущество: Вы можете использовать шестнадцатеричные значения цвета вместо того, чтобы задавать каждый канал в 8-битном формате (0-255).

Вот как я это реализовал, основываясь на идее из статьи: Как объединить функции цвета SASS и CSS-переменные.

Правка: Вы также можете изменить функцию альфа-канала, чтобы использовать только #{$color-name}-rgb и опустить созданные CSS-переменные *-r, *-g, *-b.

Результат

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Сгенерировано из функции alpha
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // ИЛИ (вы написали это сами, посмотрите использование)
  color: rgba(var(--main-color-rgb), 0.5);
}

Использование:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // С использованием функции alpha:
  color: alpha(var(--main-color), 0.5);
  // ИЛИ просто с использованием сгенерированной переменной напрямую
  color: rgba(var(--main-color-rgb), 0.5);
}

Миксин и функции

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// заменяет подстроку на другую строку
// авторство: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

Если у вас есть дополнительные вопросы о SASS/SCSS или о том, как оптимизировать работу с цветами, не стесняйтесь спрашивать!