Color

Color filters modify or extract properties from CSS color strings. These filters are commonly used with color theme settings.

To learn how to access the settings of the theme, refer to Settings.

color_brightness

Calculates the perceived brightness of a given color.

{{ '#EC4899' | color_brightness }}

130.27

color_darken

Darkens a given color by a specific percentage. The percentage must be between 0 and 100.

{{ '#EC4899' | color_darken: 30 }}

#8a0e4b

color_desaturate

Desaturates a given color by a specific percentage. The percentage must be between 0 and 100.

{{ '#EC4899' | color_desaturate: 30 }}

#cd6498

color_extract

Extracts a specific color component from a given color.

Accepts the following color components:

• red
• green
• blue

{{ '#EC4899' | color_extract: 'red' }}

236

color_lighten

Lightens a given color by a specific percentage. The percentage must be between 0 and 100.

{{ '#EC4899' | color_lighten: 30 }}

#fad0e5

color_mix

Blends two colors together by a specific percentage factor. The percentage must be between 0 and 100.

📘

Tip

A percentage factor of 100 returns the color being filtered. A percentage factor of 0 returns the color supplied to the filter.

{{ '#EC4899' | color_mix: '#10b981', 50 }}

#7e818d

If one input has an alpha component, but the other does not, an alpha component of 1.0 will be assumed for the input without an alpha component.

{{ '#EC4899' | color_mix: '#10b981', 50 }}

rgba(126, 129, 141, 0.900)

color_modify

Modifies a specific color component of a given color by a specific amount.

The following table outlines valid color components, and the value range for their modifications:

{{ '#EC4899' | color_modify: 'red', 255 }}

#ff4899

The format of the modified color depends on the component being modified. For example, if you modify the alpha component of a color in hexadecimal format, then the modified color will be in rgba() format.

{{ '#EC4899' | color_modify: 'alpha', 0.9 }}

rgba(236, 72, 153, 0.9)

color_saturate

Saturates a given color by a specific percentage. The percentage must be between 0 and 100.

{{ '#EC4899' | color_saturate: 30 }}

#ff3297

color_to_hex

Converts a CSS color string to hexadecimal format (hex6).

Because colors are converted to hex6 format, if a color with an alpha component is provided, then the alpha component is excluded from the output.

{{ 'rgb(236, 72, 153)' | color_to_hex }}

#EC4899

color_to_hsl

Converts a CSS color string to HSL format.

If a color with an alpha component is provided, the color is converted to HSLA format.

{{ '#EC4899' | color_to_hsl }}

hsl(330, 81%, 60%)

color_to_rgb

Converts a CSS color string to RGB format.

If a color with an alpha component is provided, then the color is converted to RGBA format.

{{ '#EC4899' | color_to_rgb }}

rgb(236, 72, 153)