Excellent write-up! Something I've found annoying with the variables is that if you create a variable like this: --clr-primary : #fa0e9d ; you can't then use that variable like so: background -color: rgba(var(--clr-primary), 0 . 5 ) A solution I've found is to create 2 variables: :root { --clr-primary : rgb (var(--clr-primary-rgb)); --clr-primary-rgb : 250 , 14 , 157 ; } .otherElement { background-color : rgba (var(--clr-primary-rgb), 0.5 ); } Cheers 🍻