Color filters

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

color_to_rgb

Converts a CSS color string to CSS rgb() format.

Input

{{ '#7ab55c' | color_to_rgb }}

Output

rgb(122, 181, 92)

If the input color has an alpha component, then the output will be in CSS rgba() format.

{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}

Output

rgba(122, 181, 92, 0.5)

color_to_hsl

Converts a CSS color string to CSS hsl() format.

Input

{{ '#7ab55c' | color_to_hsl }}

Output

hsl(100, 38%, 54%)

If the input color has an alpha component, then the output will be in CSS hsla() format.

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}

Output

hsla(100, 38%, 54%, 0.5)

color_to_hex

Converts a CSS color string to hex6 format.

Input

{{ 'rgb(122, 181, 92)' | color_to_hex }}

Output

#7ab55c

Hex output is always in hex6 format. If there is an alpha channel in the input color, it will not appear in the output.

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hex }}

Output

#7ab55c

color_extract

Extracts a component from the color. Valid components are alpha, red, green, blue, hue, saturation and lightness.

Input

{{ '#7ab55c' | color_extract: 'red' }}

Output

122

color_brightness

Calculates the perceived brightness of the given color. Uses W3C recommendations for calculating perceived brightness, for the purpose of ensuring adequate contrast.

Input

{{ '#7ab55c' | color_brightness }}

Output

153.21

color_modify

Modifies the given component of a color.

  • Red, green and blue values should be a number between 0 and 255
  • Alpha should be a decimal number between 0 and 1
  • Hue should be between 0 and 360 degrees
  • Saturation and lightness should be a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_modify: 'red', 255 }}

Output 

#ffb55c

The filter will return a color type that includes the modified format — for example, if you modify the alpha channel, the filter will return the color in rgba() format, even if your input color was in hex format.

Input

{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

Output

rgba(122, 181, 92, 0.85)

color_lighten

Lightens the input color. Takes a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_lighten: 30 }}

Output 

#d0e5c5

color_darken

Darkens the input color. Takes a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_darken: 30 }}

Output 

#355325

color_saturate

Saturates the input color. Takes a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_saturate: 30 }}

Output 

#6ed938

color_desaturate

Desaturates the input color. Takes a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_desaturate: 30 }}

Output 

#869180

color_mix

Blends together two colors. Blend factor should be a value between 0 and 100 percent.

Input 

{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}

Output 

#bdbb94

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

Input 

{{ 'rgba(122, 181, 92, 0.75)' | color_mix: '#ffc0cb', 50 }}

Output 

rgba(189, 187, 148, 0.875)

color_contrast

Calculates the contrast ratio between two colors. Returns the numerator part of the ratio, which has a denominator of 1. For example, for a contrast ratio of 3.5:1, the filter returns 3.5.

With regards to accessibility, WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

The order in which you specify the colors does not matter. The filter will automatically detect the lighter and darker colors.

Input 

{{ '#495859' | color_contrast: '#fffffb' }}

Output

7.4

color_difference

Calculates the color difference or distance between two colors. With regards to accessibility, the W3C suggests that the color difference should be greater than 500.

Input 

{{ '#ff0000' | color_difference: '#abcdef' }}

Output

528

brightness_difference

Calculates the perceived brightness difference between two colors. With regards to accessibility, the W3C suggests that the brightness difference should be greater than 125.

Input 

{{ '#fff00f' | brightness_difference: '#0b72ab' }}

Output

129