Filter Hue Rotate

Rotate hue colors

Syntax

visual="hue-rotate:[degrees]"

Values

Value	CSS Output	Description
0	filter: hue-rotate(0deg)	No rotation
90	filter: hue-rotate(90deg)	90° rotation
180	filter: hue-rotate(180deg)	180° rotation

Examples

<img visual="hue-rotate:90">Shifted hue</img>

Preview

Hue Rotate Filter

visual="hue-rotate:90" - Rotate color hues

0°

90°

180°

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">0°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180°</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="filter:[custom-value]">Custom</div>