CSS Tip

Hue manipulation using color-mix()

Use the new color-mix() to manipulate the Hue of a color in the HSL color space

.box {
  --color: red; 
  --h: 0; /* angle (from 0 to 360 without unit) */
  
  --new-color: 
    color-mix(in hsl longer hue, 
      var(--color), var(--color) calc(var(--h)*1%/3.6)
    );
}

The same can be done using relative colors but the support is still low:

.box {
  --color: red; 
  --h: 0; /* angle (from 0 to 360 without unit) */
  
  --new-color: hsl(from var(--color) calc(h + var(--h)*1deg) s l)
}

See the Pen hue manipulation using color-mix() by Temani Afif (@t_afif) on CodePen.

More CSS Tips