AppsThemesSupport

Color

Suggest Edits

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

string | color_brightness
returns  number

Calculates the perceived brightness of a given color.

{{ '#EC4899' | color_brightness }}

130.27

color_darken

string | color_darken: number
returns  string

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

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

#8a0e4b

color_desaturate

string | color_desaturate: number
returns  string

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

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

#cd6498

color_extract

string | color_extract: string
returns  number

Extracts a specific color component from a given color.

Accepts the following color components:

  • red
  • green
  • blue
{{ '#EC4899' | color_extract: 'red' }}

236

color_lighten

string | color_lighten: number
returns  string

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

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

#fad0e5

color_mix

string | color_mix: string, number
returns  string

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

string | color_modify: string, number
returns  string

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:

ComponentValue Range
redAn integer between 0 and 255
greenAn integer between 0 and 255
blueAn integer between 0 and 255
alphaA decimal between 0 and 1
{{ '#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

string | color_saturate: number
returns  string

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

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

#ff3297

color_to_hex

string | color_to_hex
returns  string

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

string | color_to_hsl
returns  string

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

string | color_to_rgb
returns  string

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)

Updated 10 months ago