Liquid Color Filters in Shopify

Color filters are to adjust or to extract properties from CSS color strings. These filters always go together with color theme settings.

However, please keep reading our instructional writing on Liquid Color Filters: rgb, hsl, hex, extract, brightness, modify, lighten, darken, saturate, desaturate, mix, contrast, difference, brightness difference to know more deeply about this topic.

Liquid Color Filters

color_to_rgb

It does convert a CSS color string to CSS rgb() format.

Input

{{ '#7ab55c' | color_to_rgb }}

Output

rgb(122, 181, 92)

In case the input color has an alpha component, then the output will definitely be located in CSS rgba() format.

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

Output

rgba(122, 181, 92, 0.5)

color_to_hsl

It does convert a CSS color string to CSS hsl() format.

Input

{{ '#7ab55c' | color_to_hsl }}

Output

hsl(100, 38%, 54%)

color_to_hex

It can convert a CSS color string to hex6 format.

Input

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

Output

#7ab55c

Hex output is casually located in hex6 format. Under the circumstance that there is an alpha channel in the input color, it will not be displayed in the output.

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

Output

#7ab55c

color_extract

It can extract a component from the color. Valid components are alpha, green, red, blue, hue, brightness and saturation.

Input

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

**Output perceived brightness **

122

color_brightness

It can calculate the suitable perceived brightness of the chosen color. On top of that, it employs W3C recommendations to calculate brightness in order to ensure adequate contrast.

Input

{{ '#7ab55c' | color_brightness }}

Output

153.21

color_modify

It is able to edit the given component of any 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 type of color that contains the configured format. For instance, in case you edit the alpha channel, the filter will return the color in rgba() format, even when your input color was in hex format.

Input

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

Output

rgba(122, 181, 92, 0.85)

color_lighten

It can lighten the input color. Moreover, it is able to take a value between 0 and 100 percent.

Input

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

Output

#d0e5c5

color_darken

It can darken the input color. Additional, it is capable of taking a value between 0 and 100 percent.

Input

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

Output

#355325

color_saturate

It can saturate the input color. Moreover, it is able to take a value between 0 and 100 percent.

Input

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

Output

#6ed938

color_desaturate

It can desaturate the input color. Moreover, it is able to take a value between 0 and 100 percent.

Input

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

Output

#869180

color_mix

It can blend the 2 colors. The bend factor should be a value between 0 and 100 percent.

Input

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

Output

#bdbb94

In case 1 input has an alpha component, but unfortunately the other doesn’t, an alpha component of 1 will immediately be assumed for the imput without an alpha component.

Input

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

Output

rgba(189, 187, 148, 0.875)

color_contrast

It can calculate the contrast ratio between 2 colors. Additionally, it is able to return the numerator part of the ratio, which does have a denominator of 1. For instance, the filter returns 3.5 for a contrast ratio of 3.5:1.

Input

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

Output

7.4

color_difference

It can calculate the color difference or distance between 2 colors. Regarding to accessibility, the W3C recommends that the color difference should be greater than 500.

Input

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

Output

528

brightness_difference

It can calculate the perceived brightness difference between 2 colors. Regarding to accessibility, the W3C recommends that the color difference should be greater than 125.

Input

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

Output

129

Conclusion

We hope that this instruction has helped you partly solved all questions about the problem on color filters!