## Support ### Account

Home Forums Front-end Issues Convert hexadecimal value to HSL

Solved

# Convert hexadecimal value to HSL

• Hello everyone.

I’m using a color picker in a group field and I want to convert hexadecimal value to HSL. I wonder if I can do that. Can somebody help me?

Thank you.
Mike.

•  • @hube2 I am back after a while.

I believed that code worked, but it’s something missing right here..

``````function hexToHsl(\$hex){
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta === 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta) % 6;
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2) * 100;
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1))) * 100;
if (\$saturation < 0) {
\$saturation += 100;
}

\$lightness = round(\$lightness);
\$saturation = round(\$saturation);

return "hsl(\${hue}, \${saturation}%, \${lightness}%)";
}``````

usage

`<?php echo '',print_r(hexToHsl(\$hex_color)).'';?>`

Returns : `hsl(137, 99%, 42%)1` but the correct is `hsl(258, 83%, 45%)`. What exactly I’m doing wrong? Any kind of help is much appreciated.

Sincerely,
Mike

•  No print are, the call to that function is outputting “true”

`<?php echo hexToHsl(\$hex_color);?>`

• `define( 'WP_DEBUG', true );`

I take a message :

``````Invalid characters passed for attempted conversion, these have been ignored in line

\$red = hexdec(substr(\$hex, 0, 2)) / 255;``````

Let’s say that turn of the ‘`WP_DEBUG'` then it gave the same results. `hsl(137, 99%, 42%)` instead of `hsl(258, 83%, 45%)`

I believe that the function gave me wrong results.. 🙁

• @hube2 also I tried this part of function :

``````function hexToHsl(\$hex){
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta == 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta);
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2);
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1)));
if (\$saturation < 0) {
\$saturation += 1;
}

\$lightness = round(\$lightness*100);
\$saturation = round(\$saturation*100);

// return "hsl(\${hue}, \${saturation}%, \${lightness}%)";

return array(\$hue, \$saturation, \$lightness);
}``````

I called as `<?php echo hexToHsl(\$hex_color); ?>` and it returns me an `Array` without any kind of result.

Every part of the solution is welcome.

Thanks.

•  What does \$hex_color output on its own?

Assuming its something like: fff000

•  The issue is that the color returned from ACF begins with #

At the beginning of the function add something like

``````
\$hex = str_replace('#', ''. \$hex);
``````
• @jarvis the output is #fff000.

@hube2 I tried but it returns hsl(0,0,0);

•  ``````
<?php
\$hex = get_field('hex_color');
\$hex = str_replace('#', ''. \$hex);
echo hexToHsl(\$hex);
?>``````
• @jarvis returns `hsl(0,0,0)` 🙁

•  <?php
\$hex = get_field(‘hex_color’);
echo ‘get field = ‘.\$hex.'<br/>’;
\$hex = str_replace(‘#’, ”. \$hex);
echo ‘str replace = ‘.\$hex.'<br/>’;
echo hexToHsl(\$hex);
?>
Just check it gets to that point ok i.e. a hex value without the hash.

If so, after this, add the following:

``````<?php
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta == 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta);
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2);
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1)));
if (\$saturation < 0) {
\$saturation += 1;
}

\$lightness = round(\$lightness*100);
\$saturation = round(\$saturation*100);``````

But at various points, check the outcome, ensure the function works as you expect

For me, this works:

``````<?php

function hexToHsl(\$hex){
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta == 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta);
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2);
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1)));
if (\$saturation < 0) {
\$saturation += 1;
}

\$lightness = round(\$lightness*100);
\$saturation = round(\$saturation*100);

return "hsl(\${hue}, \${saturation}%, \${lightness}%)";

//return array(\$hue, \$saturation, \$lightness);
}
\$hex_color = 'fff000';
echo hexToHsl(\$hex_color);``````

Returns: hsl(56, 100%, 50%)

• @jarvis thank you for your reply. The pain point is the `#`, if it’s included then the outcome value is wrong.

How exactly I can remove the `#` from the hex value? Sorry but I’m confused. 🙁 Can you provide me a solution with full code?

Kind regards.

•  Sorry guys, I just found that code over on stack. Did not test it. I really don’t know anything about converting to HSL so I really don’t understand exactly what it’s doing.

• I want to convert the HEX value to HSL. From the following function, when I passed directly the value `fff000`, then the outcome hsl value is correct, but when I passed `#fff000` then the outcome hsl value is incorrect.

The problem came from `#`. I wonder how I remove the `#` from the get_sub_field. As an instance `<?php \$hex_color = get_sub_field('hex_color');?>`

``````<?php

function hexToHsl(\$hex){
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta == 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta);
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2);
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1)));
if (\$saturation < 0) {
\$saturation += 1;
}

\$lightness = round(\$lightness*100);
\$saturation = round(\$saturation*100);

return "hsl(\${hue}, \${saturation}%, \${lightness}%)";

//return array(\$hue, \$saturation, \$lightness);
}
\$hex_color = 'fff000';
echo hexToHsl(\$hex_color);``````
•  This removes the #

``````<?php
\$hex = '#f00';
\$hex = str_replace('#', '', \$hex);
echo \$hex;``````

So altogether:

``````
<?php
\$hex = get_field('hex_colour');
\$hex = str_replace('#', '', \$hex);
echo hexToHsl(\$hex);
``````

The function:

``````<?php

function hexToHsl(\$hex){
\$red = hexdec(substr(\$hex, 0, 2)) / 255;
\$green = hexdec(substr(\$hex, 2, 2)) / 255;
\$blue = hexdec(substr(\$hex, 4, 2)) / 255;

\$cmin = min(\$red, \$green, \$blue);
\$cmax = max(\$red, \$green, \$blue);
\$delta = \$cmax - \$cmin;

if (\$delta == 0) {
\$hue = 0;
} elseif (\$cmax === \$red) {
\$hue = ((\$green - \$blue) / \$delta);
} elseif (\$cmax === \$green) {
\$hue = (\$blue - \$red) / \$delta + 2;
} else {
\$hue = (\$red - \$green) / \$delta + 4;
}

\$hue = round(\$hue * 60);
if (\$hue < 0) {
\$hue += 360;
}

\$lightness = ((\$cmax + \$cmin) / 2);
\$saturation = \$delta === 0 ? 0 : (\$delta / (1 - abs(2 * \$lightness - 1)));
if (\$saturation < 0) {
\$saturation += 1;
}

\$lightness = round(\$lightness*100);
\$saturation = round(\$saturation*100);

return "hsl(\${hue}, \${saturation}%, \${lightness}%)";

//return array(\$hue, \$saturation, \$lightness);
}``````
• @jarvis thank you so much. It seems that it works.

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.