# Color Filters

These filters allow you to manipulate and analyze colors in Liquid templates. They provide functions for adjusting brightness, contrast, saturation, and converting between color formats. Use these filters to ensure accessible color schemes, generate dynamic color values, and perform color calculations.

## brightness_difference

Calculate the brightness difference between two colors.

**Input**

```liquid
{{ 'black' | brightness_difference: 'white' }}
```

**Output**

```text
255
```

---

## color_contrast

Calculate the contrast ratio between two colors.

**Input**

```liquid
{{ 'black' | color_contrast: 'white' }}
{{ 'white' | color_contrast: 'black' }}
```

**Output**

```text
21
21
```

---

## color_darken

Darkens the input color by given amount. Accepts a value between 0 and 100.

**Input**

```liquid
{{ '#ef5fa0' | color_darken: 10 }}
```

**Output**

```text
#ea3184
```

---

## color_desaturate

Desaturates the input color by given amount. Accepts a value between 0 and 100.

**Input**

```liquid
{{ '#ef5fa0' | color_desaturate: 10 }}
```

**Output**

```text
#e668a1
```

---

## color_difference

Calculate the difference between two colors.

**Input**

```liquid
{{ 'black' | color_difference: 'white' }}
```

**Output**

```text
765
```

---

## color_extract

Get the perceived brightness of the given color. This is useful for example when ensuring a adequate contrast between background and the foreground.

**Input**

```liquid
{{ '#ef5fa0' | color_brightness }}
```

**Output**

```text
159.04482
```

---

## color_lighten

Lighten the input color by given amount. Accepts a value between 0 and 100.

**Input**

```liquid
{{ '#ef5fa0' | color_lighten: 10 }}
```

**Output**

```text
#f48dbc
```

---

## color_min_contrast

Adjusts the given color to meet the minimum contrast ratio with the input color. The minimum contrast ratio is 7.0 by default.

**Input**

```liquid
{{ '#e2e2e2' | color_min_contrast: '#ffffff' | color_to_hex }}
```

**Output**

```text
#585858
```

---

## color_mix

Blends two colors together by the given amount. Accepts a value between 0 and 100.

**Input**

```liquid
{{ '#ef5fa0' | color_mix: 'white', 10 }}
```

**Output**

```text
#fdeff6
```

---

## color_modify

Modify the given component of the color.

**Input**

```liquid
{{ '#ef5fa0' | color_modify: 'alpha', 0.5 }}
```

**Output**

```text
rgba(239, 95, 160, 0.5)
```

---

## color_saturate

Saturates the input color by given amount. Accepts a value between 0 and 100.

**Input**

```liquid
{{ '#ef5fa0' | color_saturate: 10 }}
```

**Output**

```text
#f8569f
```

---

## color_to_hex

Converts a color to its HEX value.

**Input**

```liquid
{{ 'black' | color_to_hex }}
{{ 'rgb(0, 0, 0)' | color_to_hex }}
{{ 'rgba(0, 0, 0, 0.5)' | color_to_hex }}
```

**Output**

```text
#000000
#000000
#00000080
```

---

## color_to_hsl

Converts a color to its HSL value.

**Input**

```liquid
{{ '#000000' | color_to_hsl }}
{{ 'black' | color_to_hsl }}
{{ 'rgb(0, 0, 0)' | color_to_hsl }}
```

**Output**

```text
hsl(0, 0%, 0%)
hsl(0, 0%, 0%)
hsl(0, 0%, 0%)
```

---

## color_to_rgb

Converts a color to its RGB value.

**Input**

```liquid
{{ '#000000' | color_to_rgb }}
{{ 'black' | color_to_rgb }}
{{ 'hsl(0, 0%, 0%)' | color_to_rgb }}
```

**Output**

```text
rgb(0, 0, 0)
rgb(0, 0, 0)
rgb(0, 0, 0)
```