Skip to main content

​
Overview

Color effect utilities apply grayscale, invert, or sepia through the filter property, plus filter-none to reset inherited filters. They are ideal for inactive states, editorial tone, and quick dramatic treatments.

​
Example

​
Markup

​
Best Practices

  • Use filter-none to reset a filter chain when a nested asset should stay untouched.
  • Use grayscale helpers for muted previews or inactive image states.
  • Use invert helpers cautiously on artwork and icons so contrast remains readable.
  • Use sepia on editorial or archival treatments where warmth is intentional.

Saturate

Reintroduce or reduce intensity around grayscale and sepia treatments

Hue Rotate

Shift color families instead of flattening them