I made a free hex to rgb color converter liquid

Not applicable
0 0 54

Needed to convert the colors values from the color picker in the theme settings form.  So I made this quick hex2rgb liquid.

I couldn't find a quick solution for this that wouldn't require javascript.  I wanted something I could just use in a css liquid.  The advantage of css rgb colors is that you can add transparency.  This is useful if you want to make the background of an element transparent without applying that transparency to all the child elements.

Hope someone finds this useful.

I'm sure the gods of Shopify can probably tweak this to be less code, but this works for me.  It would be great if we could just shove this into a filter.

Usage:

 

{% comment %}
Assign a variable called "hex2rgb_hex" to the color you want to convert.  This is where you'd put the variable assignment from settings.
{% endcomment %}
{% assign hex2rgb_hex = settings.my_hex_color_var %}
{% include 'hex2rgb' %}
{% comment %}
hex2rgb.liquid will return three variables hex2rgb_r, hex2rgb_g, hex2rgb_b that you can apply these variables in your css rules.

Note: Some other variables are also set, so beware of that.  All variables are prefixed with "hex2rgb_" to try to avoid naming conflicts.
{% endcomment %}
.my_element {
  background: rgb({{ hex2rgb_r }}, {{ hex2rgb_g }}, {{ hex2rgb_b }}, {{ settings.my_opacity_var }});
}

 

 

0 Likes
Not applicable
0 0 54

I tried to just upload the liquid but it didn't work, so I just created a git repo for it.

https://github.com/granteagon/Shopify-hex2rgb.liquid

0 Likes
Not applicable
0 0 54

Update: You can't include liquid in css files that exist within the assets folder when using the following method:

{{ "style.css" | asset_url | stylesheet_tag }}

It does however work if you just create your own style tag in your doc head like so:

 

<style type="text/css">
  {% assign hex2rgb_hex = settings.my_color %}
  {% include 'hex2rgb.pack' %}
  #my_element {
    background: rgba({{ hex2rgb_r }}, {{ hex2rgb_g }}, {{ hex2rgb_b }}, {{ settings.my_opacity }}) !important;
  }
</style>

This may be a bit less desirable for some developers, but it works and it's not javascript.

0 Likes
Shopify Staff
Shopify Staff
5826 0 272

One of the goddesses of Shopify has heard you.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Partner
28 0 9

That's a very clever function!

0 Likes
Shopify Partner
41 0 0

Great function Sinegrant - a nice little stop-gap for sure!

Anyone know whether the Shopify gods will provide a color picker with rgba support in Shopify 2?

Custom Web Design & Branding | www.desyna.com | hello@desyna.com
0 Likes
Shopify Expert
704 0 67

This is a cool snippet, nice one!

I'm a million different people
0 Likes
Shopify Staff
Shopify Staff
5826 0 272

Now that Shopify supports sassy CSS, you can use something like this in your theme stylesheet:

color: rgba( {{ settings.link_color_hex }}, {{ settings.link_transparency }} );

And if those theme settings above are set to #444 and 0.5, the compiled stylesheet will read:

color: rgba(68, 68, 68, 0.5); 

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
1 Like