Convert hexadecimal value to HSL

• mikemikelle07

• October 28, 2021 at 7:52 am

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.

• John Huebner

• October 28, 2021 at 9:44 pm

Try this https://stackoverflow.com/questions/58931099/php-function-to-convert-hex-to-hsl-not-hsl-to-hex

• mikemikelle07

• November 9, 2021 at 2:03 pm

@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

• John Huebner

• November 9, 2021 at 2:08 pm

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

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

• mikemikelle07

• November 9, 2021 at 2:53 pm

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.. 🙁

• mikemikelle07

• November 11, 2021 at 7:17 am

@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.

• jarvis

• November 11, 2021 at 8:20 am

Hi @mikemikelle07

What does $hex_color output on its own?

Assuming its something like: fff000

• John Huebner

• November 11, 2021 at 8:27 am

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

At the beginning of the function add something like

$hex = str_replace('#', ''. $hex);

• mikemikelle07

• November 11, 2021 at 8:56 am

@jarvis the output is #fff000.

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

• jarvis

• November 11, 2021 at 9:03 am

What about:

<?php 
$hex = get_field('hex_color');
$hex = str_replace('#', ''. $hex);
echo hexToHsl($hex);
?>

• mikemikelle07

• November 11, 2021 at 9:36 am

@jarvis returns hsl(0,0,0) 🙁

• jarvis

• November 11, 2021 at 9:49 am

<?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%)

• mikemikelle07

• November 11, 2021 at 10:22 am

@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.

• John Huebner

• November 11, 2021 at 10:24 am

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.

• mikemikelle07

• November 11, 2021 at 10:41 am

@hube2

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);

• jarvis

• November 11, 2021 at 11:21 am

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

• mikemikelle07

• November 11, 2021 at 3:47 pm

@jarvis thank you so much. It seems that it works.