Dynamic Colors with Relative Color Syntax

Relative Color Syntax allows you to take any existing color and modify it on the fly, such as adding transparency to a variable. Read more on MDN →

.element {
  --brand-color: #3b82f6;

  /* Modify the color directly! */
  background-color: rgb(from var(--brand-color) r g b / 50%);
}

Base Color

#3b82f6

50% Opacity

Derived dynamically