How To Convert Hex to RGBA Value Using Shopify Liquid
Shopify Theme Settings Input Fields support a color picker field. But the output value is a color hex code. If you want to convert this value to RGB, Shopify liquid is supporting that.
Eg: {{ '#ff3f00' | color_to_rgb }} output rgb(255, 63, 0)
Does Shopify liquid support converting Hex to RGBA with opacity? Not, it doesn’t. But you can combine some Shopify liquid codes to do that.
Please follow the below steps to learn how to convert Hex to RGBA with opacity using Shopify liquid code.
- Creating a new snippet is called
color_to_rgba123456{%-liquidassign rgb = color | color_to_rgbassign tail = opacity | prepend: ', ' | append: ')'-%}{{ rgb | replace: 'rgb', 'rgba' | replace: ')', tail }} - Using this code to convert a hex value to a RGBA value1{%- render 'color_to_rgba', color:'#ff3f00', opacity:'0.8' -%}
Ouput:rgba(255, 63, 0, 0.8)
I hope this article is helpful to you.
