Color Effects

Use bundled grayscale, invert, sepia, and filter reset utilities for quick tonal treatments.

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.

Class	Filter (CSS)	Usage
.filter-none	filter: none;	Clear inherited filters on the element
.grayscale	filter: grayscale(1);	Full grayscale
.grayscale-50	filter: grayscale(0.5);	Partial desaturation
.invert	filter: invert(1);	Full color inversion
.invert-50	filter: invert(0.5);	Partial inversion
.sepia	filter: sepia(1);	Full sepia tone
.sepia-50	filter: sepia(0.5);	Light sepia warmth

Example

Markup

<img alt="Toned media" class="sepia-50 rounded-xl" src="editorial.jpg"/>

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.

Related Utilities

Saturate

Reintroduce or reduce intensity around grayscale and sepia treatments

Hue Rotate

Shift color families instead of flattening them