Liquid Color Filters in Shopify

Updated: March 30, 2020

Share:

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!

Recommend for you
Image Description
Abandoned Cart Recovery [Free]

Setup Abandoned cart recovery in 1-click

Learn more
Image Description
SEO Suite [Free]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Comments for Liquid Color Filters



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up