Magic of " from " Keyword

This is one of the most anticipated CSS features. It allows taking an existing color and changing only one parameter in it (e.g., transparency or brightness).

How It Works:

:root { --brand: #ff5733; }

.card {
  /* Take --brand and change only its transparency */
  background: rgb(from var(--brand) r g b / 20%);
  
  /* Take --brand and make it 20% darker via oklch */
  border-color: oklch(from var(--brand) calc(l - 0.2) c h);
}