> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Effects

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

export const FilterColorEffectsDemo = () => {
  const effects = [{
    cls: "filter-none",
    val: "none"
  }, {
    cls: "grayscale",
    val: "grayscale(1)"
  }, {
    cls: "grayscale-50",
    val: "grayscale(0.5)"
  }, {
    cls: "invert",
    val: "invert(1)"
  }, {
    cls: "invert-50",
    val: "invert(0.5)"
  }, {
    cls: "sepia",
    val: "sepia(1)"
  }, {
    cls: "sepia-50",
    val: "sepia(0.5)"
  }];
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="33%" stop-color="#a855f7"/><stop offset="66%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="320" height="240" rx="24" fill="url(#a)"/><circle cx="64" cy="174" r="38" fill="rgba(255,255,255,0.18)"/><circle cx="246" cy="64" r="52" fill="rgba(255,255,255,0.14)"/><rect x="112" y="96" width="96" height="48" rx="18" fill="rgba(255,255,255,0.18)"/></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-2 gap-4">
          {effects.map(effect => <div key={effect.cls} className="flex flex-col items-center gap-2">
              <span className="tw-label">{effect.cls}</span>
              <div className="rounded-lg overflow-hidden" style={{
    width: "100%",
    aspectRatio: "4/3"
  }}>
                <img src={imgSrc} alt="" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    filter: effect.val
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## 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

<FilterColorEffectsDemo />

### Markup

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Saturate" icon="droplet" href="/filters/saturate">
    Reintroduce or reduce intensity around grayscale and sepia treatments
  </Card>

  <Card title="Hue Rotate" icon="palette" href="/filters/hue-rotate">
    Shift color families instead of flattening them
  </Card>
</CardGroup>