<div class="container">
   <div class="rgba">rgba</div>
   <div class="color-mix">color-mix</div>
</div>

.container {
  display: flex;
  gap: 8px;
}

:root {
  --color-primary: #0063c5;
  --color-primary-rgb: 0, 99, 197;
}

.rgba {
  padding: 24px;
  background-color: rgba(var(--color-primary-rgb), 50%);
}

.color-mix {
  padding: 24px;
  background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}