Snippet

The from syntax allows extracting and modifying individual components from any source color:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<.css-selector> {
  color: #0000FF; /* blue */
  --brand: #FF0000; /* red */

  background: hsl(from currentColor h s l); /* extracts h=240deg s=100% l=50% */
  background: rgb(from var(--brand) r g b); /* extracts r=255 g=0 b=0 */

  /* Takes blue (h=240deg s=100% l=50%) and transforms it: */
  background: hsl(from #0000FF calc(h + 60) calc(s * 0.8) calc(l * 1.2)); /* results in h=300deg s=80% l=60% (purple-like) */
}

Reference