Skip to Content

Color

The color object represents a color value in the store, providing access to different color formats.

Usage Example

{%- comment -%} Show color swatch and values {%- endcomment -%} <div style="display: flex; align-items: center; gap: 1em;"> <span style="display:inline-block;width:1.5em;height:1.5em;border-radius:50%;background:{{ color.color }};border:1px solid #ccc;"></span> <span>HEX: {{ color.color }}</span> <span>RGB: {{ color.rgb }}</span> <span>HSL: {{ color.hsl }}</span> </div>

Properties

color

Returns color as HEX string.

hsl

Returns color as HSL string.

rgb

Returns color as RGB string.

Last updated on