Liquid color filters in Shopify make it easy to customize how your products are displayed by allowing customers to sort items based on color. Dispite it’s great benefits, many store owners find it challenging to customize color schemes effectively. In this article, we will discover how to leverage Liquid Color Filters to enhance your Shopify theme’s appearance and potentially improve user experience through better color management.

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

Liquid Color Filters in Shopify are powerful tools for customizing your store’s visual appearance and improving accessibility. By mastering these filters, you can easily manipulate colors, create cohesive color schemes, and ensure proper contrast for better user experience.

Take action now to implement these filters in your Shopify theme customization. Remember, effective use of color can significantly impact your store’s aesthetics and usability, potentially leading to increased customer engagement and conversions. As you continue to refine your Shopify store, utilizing these color filters will prove invaluable in creating a more visually appealing and accessible e-commerce platform.