HubL - Convert hex color to hsl

[Matthias_harms]

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

[piersg · Accepted solution]

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

<!--
  templateType: "page"
  isAvailableForNewContent: false
-->
{% 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]) }};
}

[himanshurauthan]

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.