Liquid Color Filters in Shopify
Drive 20-40% of your revenue with Avada
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
- color_to_hsl
- color_to_hex
- color_extract
- color_brightness
- color_modify
- color_lighten
- color_darken
- color_saturate
- color_desaturate
- color_mix
- color_contrast
- color_difference
- brightness_difference
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!
Liquid
