Developer Dive: Hex to RGB Color Filter Added For HubSpot

Recently, while working on a HubSpot page template banner element, I came up against a challenge an opportunity for professional growth. I was trying to create a situation whereby a gradient would apply a company's brand colors to an image behind it, but was limited by Hubspot's former color storage method: hex values.

Since the colors HubSpot stores are natively in hex, not RGB, the color values we pulled out to populate the gradient's parameters did not have the option for transparency. Therefore, the gradient either existed or did not exist--like an ON / OFF switch. There was no in-between.

Now sure, there are a lot of ways to get around this, but most of these ways tend to involve specific styling fixes or awkward positioning, which means that the majority of these fixes are less "fix" and more "hack" -- i.e. prone to needless complexity that makes them questionably serviceable.

Questionably serviceable due to the fact that more specific styles require defining something, which introduces additional points at which a code has potential to break.

Obviously, there are scenarios where it's to your advantage to be more specific in styling, but it can become a problem when you run with values that work in one case, but not another. We call these magic numbers.

For example, a block that is 600 pixels wide may display perfectly on your laptop, but break when viewing on a phone. In this example, 600 pixels is the magic number.

So for this color/gradient issue, our challenge lie in using the fewest number of elements possible with minimal CSS to allow for flexibility with the content entered.

Theorycrafting and Pseudo-elements

After brainstorming a few different configurations, the simplest solution ended up being to apply the gradient to the child of the element with the background image and let that define the height. No weird positioning, no weird pseudo-elements, no magic numbers here, boss. Just nice and clean.

However, since HubSpot only allows for hexadecimal values to be specified within the options in content settings, we were stuck with the awkward situation of only being able to use the CSS opacity property to tint the image, which simultaneously dropped the opacity of the other elements in the banner.

Grab, Strip, Explode

To solve for this unintended consequence, we grabbed the value, stripped the pound sign and exploded the string into three chunks. This was possible because hex colors are just RGB values encoded in hex. So for example, 255 = FF, so FF|FF|FF = 255, 255, 255 (white). Alright, we thought, now we got this! Except we can't run PHP on HubSpot and HubL doesn't allow for this level of data manipulation on the user end.

Accurate depiction of me upon revelation of HubL limitation.

But after explaining the situation to HubSpot, they graciously added this code to their filter list (documentation and all--woohoo!) If that isn't customer-driven development, I don't know what is.

So now we're able to pull Content Settings colors and swap 'em to RGB, allowing us to do all sorts of cool stuff like the aforementioned image tinting, creating semi-transparent treatments on menus, or using opacity in transitions and animations. All of this without having to resort to creating an entirely new element to use the CSS opacity property.

Basically, with the new filter you have the ability to scale so that varying degrees of color can be applied to an element.

Programmatic Color Mixing

With a little craftiness, you can even use this to augment or replace the functionality of the HubSpot Lighten/Darken color filter. Those that have used this filter understand that it has a narrow scope of color manipulation, often significantly altering the intended color.

Using a similar parent/child relationship to the gradient in my first example, you simply run your primary color through the Lighten/Darken filter using a negative value to darken it and set it as the background of the parent element.

On the child element, run your secondary color through the RGB filter and drop the opacity to something fairly low (in my case, I used 35%). Now you've got programmatic color mixing, allowing you to quickly create section separations using in-brand colors!

Now that's something all you non-dev folks can get stoked on! In-brand colors, y'all!