Support

Account

Home Forums Front-end Issues Convert hexadecimal value to HSL Reply To: Convert hexadecimal value to HSL

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