Member

## HubL - Convert hex color to hsl

SOLVE

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

1 Accepted solution
Solution

## HubL - Convert hex color to hsl

SOLVE

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]) }};
}``````

2 Replies 2
Solution

## HubL - Convert hex color to hsl

SOLVE

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]) }};
}``````

## HubL - Convert hex color to hsl

SOLVE

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.