topic Re: HubL - Convert hex color to hsl in CMS Development

HubL - Convert hex color to hsl

Matthias_harms — Mon, 01 May 2023 11:19:39 GMT

Hi,

I didn't find any documentation for this. For some color-based calculations in CSS is it essential to have the color as a HSL value. In the HubL docs, I only find https://developers.hubspot.com/docs/cms/hubl/filters#convert-rgb.

How do I do this conversion to HSL in Hubl?

:root { --primary-color: {{theme.colors.primary.color}}; }

Best

Matthias

Re: HubL - Convert hex color to hsl

himanshurauthan — Tue, 02 May 2023 10:21:55 GMT

Hello @Matthias_harms

Unfortunately, it seems that there is no built-in filter or function in HubL to convert a hex color value to HSL. However, you can use a third-party JavaScript library such as "tinycolor" to achieve this conversion in HubL. Here's an example code snippet.

{% set hexColor = "#ff0000" %} {% set hslColor = execute_javascript('tinycolor("' + hexColor + '").toHslString()') %} :root { --primary-color: {{ hslColor }}; }

In this example, we first set a variable "hexColor" to the hex color value you want to convert to HSL. Then we use the "execute_javascript" function to execute JavaScript code that uses the "tinycolor" library to convert the hex color to HSL. Finally, we set the resulting HSL color as a custom property using the ":root" selector.

You can replace the "hexColor" variable with "{{theme.colors.primary.color}}" to get the primary color value from the theme.

Re: HubL - Convert hex color to hsl

piersg — Tue, 02 May 2023 11:25:21 GMT

Hi @Matthias_harms, here's a macro for this:

{% macro RGBToHSL(r, g, b) -%} {# Make r, g, and b fractions of 1 #} {% set r = r / 255 %} {% set g = g / 255 %} {% set b = b / 255 %} {# Find greatest and smallest channel values #} {% set cmin = [r,g,b]|sort(False, False)|first %} {% set cmax = [r,g,b]|sort(True, False)|first %} {% set delta = cmax - cmin %} {% set h = 0 %} {% set s = 0 %} {% set l = 0 %} {# Calculate hue #} {# No difference #} {% if delta == 0 %} {% set h = 0 %} {# Red is max #} {% elif cmax == r %} {% set h = ((g - b) / delta) % 6 %} {# Green is max #} {% elif cmax == g %} {% set h = (b - r) / delta + 2 %} {# Blue is max #} {% else %} {% set h = (r - g) / delta + 4 %} {% endif %} {% set h = (h * 60)|round %} {# Make negative hues positive behind 360° #} {% if (h < 0) %} {% set h = h + 360 %} {% endif %} {# Calculate lightness #} {% set l = (cmax + cmin) / 2 %} {# Calculate saturation #} {% if delta == 0 %} {% set s = 0 %} {% else %} {% set s = delta / (1 - (2 * l - 1)|abs) %} {% endif %} {# Multiply l and s by 100 #} {% set s = (s * 100)|round %} {% set l = (l * 100)|round %} {% set return = 'hsl('~h~', '~s~'%, '~l~'%)' %} {{return}} {%- endmacro %}

Usage:

{% from '[PATH TO MACRO]/RGBToHSL macro.html' import RGBToHSL %} {{ RGBToHSL(142, 172, 87) }} {# outputs: "hsl(81, 34%, 51%)" #} {# for your specific use case #} {% set primaryColor = theme.colors.primary.color|convert_rgb|split(",") %} :root { --primary-color: {{ RGBToHSL(primaryColor[0], primaryColor[1], primaryColor[2]) }}; }