Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including liquidjs-color-filters with all npm packages installed. Try it out:

var liquidjsColorFilters = require("liquidjs-color-filters")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

liquidjs-color-filters v1.0.0

liquidjs plugin for color filters


npm npm Build Status Coveralls GitHub issues GitHub contributors David David Dev DUB Commitizen friendly semantic-release

liquidjs plugin for color filters, compatible with shopify color filters


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

const liquid = new Liquid()

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.


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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free