Reply To: Convert hexadecimal value to HSL

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