# contrast

> Applies a `filter: contrast(...)`, pushing pixels away from (above `1`) or toward (below `1`) mid-grey; `0` flattens the element to uniform grey.

```ts
import { contrast } from "@sdxc/u/effects";
```

Applies a `filter: contrast(...)`, pushing pixels away from (above `1`) or
toward (below `1`) mid-grey; `0` flattens the element to uniform grey.
Composes with every other filter utility through the shared composite filter.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.contrast(1.25)` | `css({ "--ui-filter-contrast": "1.25", filter: "... contrast(var(--ui-filter-contrast, 1)) ..." })` |

## Examples

### Basic example

Use `contrast(n)` to push an element's colors away from mid-grey above `1`, or toward it below `1`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[contrast(0.5), ...]} src={...} alt="" />
		<span mix={[...]}>contrast(0.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[contrast(1.25), ...]} src={...} alt="" />
		<span mix={[...]}>contrast(1.25)</span>
	</div>
	<div mix={[...]}>
		<img mix={[contrast(2), ...]} src={...} alt="" />
		<span mix={[...]}>contrast(2)</span>
	</div>
</div>
```

### Combining filters

Every filter utility writes its own part of one `filter`, so `contrast()` stacks with `saturate()`, `sepia()` and the rest:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[contrast(1.25), ...]} src={...} alt="" />
		<span mix={[...]}>contrast(1.25)</span>
	</div>
	<div mix={[...]}>
		<img
			mix={[contrast(1.25), saturate(1.5), sepia(0.3), ...]}
			src={...}
			alt=""
		/>
		<span mix={[...]}>all three</span>
	</div>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.contrast("2.75rem")
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.contrast(1.25))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.contrast(1.25))
```

## Signature

```ts
u.contrast(value?: number | (string & {}))
```