Why can't I access the rgba property of the a theme color setting in my css.liquid file?

Technical Q&A
,

Topic summary

  • Issue: In a Shopify css.liquid file, attempting to access the RGBA components of a theme color setting with {{ settings.color1.rgba }} returns a blank value.
  • Expected: A string like 225 225 225 / 1.0 (RGBA components) should be output.
  • Observation: Using {{ settings.color1 }} alone correctly outputs the hex color value, confirming the setting itself is accessible.
  • Implication: Sub-properties of the color object (e.g., .rgba) are not accessible in this context, or the property is not exposed by Liquid in css.liquid.
  • Context: RGBA refers to red/green/blue/alpha channels; css.liquid is a CSS file processed with Shopify’s Liquid templating.
  • Status: No resolution or workaround is provided; it remains unclear whether a different Liquid filter or method is required to obtain RGBA.
Summarized with AI on January 19. AI used: gpt-5.
1

I try to access the rgba property of a color setting inside a css.liquid file like this:

{{ settings.color1.rgba }}

This should output 225 225 225 / 1.0 But the result is blank.

When I use:

{{ settings.color1 }}

The hex value of the color is the output.

So it appears that I can access the setting but not its properties…