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


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

Output

color_contrast

Calculate the contrast ratio between two colors.

Input


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

Output


21
21

color_darken

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

Input


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

Output


#ea3184

color_desaturate

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

Input


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

Output


#e668a1

color_difference

Calculate the difference between two colors.

Input


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

Output

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


{{ '#ef5fa0' | color_brightness }}

Output


159.04482

color_lighten

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

Input


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

Output


#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


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

Output


#585858

color_mix

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

Input


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

Output


#fdeff6

color_modify

Modify the given component of the color.

Input


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

Output


rgba(239, 95, 160, 0.5)

color_saturate

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

Input


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

Output


#f8569f

color_to_hex

Converts a color to its HEX value.

Input


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

Output


#000000
#000000
#00000080

color_to_hsl

Converts a color to its HSL value.

Input


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

Output


hsl(0, 0%, 0%)
hsl(0, 0%, 0%)
hsl(0, 0%, 0%)

color_to_rgb

Converts a color to its RGB value.

Input


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

Output


rgb(0, 0, 0)
rgb(0, 0, 0)
rgb(0, 0, 0)