liquidjs-color-filters

liquidjs plugin for color filters, compatible with shopify color filters

Usage

npm i liquidjs-color-filters

import Liquid from 'liquidjs'
import { liquidColorFilters } from 'liquidjs-color-filters'

const liquid = new Liquid()
liquid.plugin(colorPlugin)

liquid.parseAndRender('{{ "rgba(122, 181, 92, 0.5)" | color_to_hsl }}')
.then(html => console.log(html)) // hsla(100, 38%, 54%, 0.5)

Difference with Shopify Liquid

We're trying to be compatible but there's still few differences:

Floor and Ceil

There could be at most 1 difference in each component value after color conversion.

Result format

color_lighten, color_modify, color_mix always return rgb/rgba format, while shopify will try to maintain the same format as the input.

Algorithm

The algorithms for color_lighten, color_darken, color_saturate, color_desaturate are not standarized by W3C, so the result is slightly different with the corresponding Shipify version.