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.

  • Hi @mikemikelle07

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

  • What about:

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

  • @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);
  • 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.