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 🍻