Sorting a multi-dimentional array of Hexadecimal/HSL colors based on shade/group (from black to white)

[sagnik]

Hi, I'm trying to sort an array of colors based on their group/category. But, unfortunately, the sorted colors are not linear. So here's some codes for your reference.

• Function: sortColors:

function sortColors($colors) {
    $s = $hue = $sat = $val = $final = [];

    foreach($colors as $k => $info) {
            $color = $info['hex'];
            $hex = strtolower(str_replace('#', '', $color));
            $info['hex'] = $hex;
            $colors[$k] = $info;

            list($r, $g, $b) = str_split($hex, 2);
            $r = hexdec($r);
            $g = hexdec($g);
            $b = hexdec($b);

            //$s[$k] = rgbtohsv($r, $g, $b);
            $s[$k] = rgbToHsl($r, $g, $b);

            $info['hex'] = "#$hex";
    }

    //Split each array up into H, S and V arrays
    foreach($s as $k => $v) {
        $hue[$k] = $v['h'];
        $sat[$k] = $v['s'];
        $val[$k] = $v['l'];
        //$val[$k] = $v['v'];
    }

    $r = $s;
    $keys = array_keys($r);
    uasort(
        $r,
        function($a, $b) {
            if(!huesAreinSameInterval($a['h'],$b['h'])){
               if ($a['h'] < $b['h'])
                   return -1;
               if ($a['h'] > $b['h'])
                   return 1;
            }
            if ($a['s'] < $b['s'])
                 return -1;
            if ($a['s'] > $b['s'])
                  return 1;
            if ($a['l'] < $b['l'])
                return 1;
            if ($a['l'] > $b['l'])
                return -1;
            return 0;
        }
    );

    $i = 0;
	foreach($r as $k => $hsv) {
	    $info = $colors[$k];
	    $hex = $info['hex'];
	    $info['hex'] = "#$hex";
	    $info['hsv'] = $hsv;

	    $final[] = $info;

	    $i++;
	}

	return $final;
}

 

• Input Array of Colors:

Array
(
    [0] => Array
        (
            [name] => Black
            [hex] => #000000
        )

    [1] => Array
        (
            [name] => White
            [hex] => #FFFFFF
        )

    [2] => Array
        (
            [name] => Red
            [hex] => #FF0000
        )

    [3] => Array
        (
            [name] => Red Devil
            [hex] => #860111
        )

    [4] => Array
        (
            [name] => Pink
            [hex] => #FFC0CB
        )

    [5] => Array
        (
            [name] => Blue
            [hex] => #0000FF
        )

    [6] => Array
        (
            [name] => Lavender Blue
            [hex] => #CCCCFF
        )

    [7] => Array
        (
            [name] => Mint Green
            [hex] => #98FF98
        )

    [8] => Array
        (
            [name] => Lincoln Green
            [hex] => #195905
        )

    [9] => Array
        (
            [name] => Electric Yellow
            [hex] => #FFFF33
        )

)

 

• Output of the Sorted Array:

Array
(
    [0] => Array
        (
            [name] => White
            [hex] => #ffffff
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 255
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 1
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 1
                )

        )

    [1] => Array
        (
            [name] => Black
            [hex] => #000000
            [rgb] => Array
                (
                    [r] => 0
                    [g] => 0
                    [b] => 0
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 0
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 0
                    [l] => 0
                )

        )

    [2] => Array
        (
            [name] => Red
            [hex] => #ff0000
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 0
                    [b] => 0
                )

            [hsl] => Array
                (
                    [h] => 0
                    [s] => 1
                    [l] => 0.5
                )

            [hsv] => Array
                (
                    [h] => 0
                    [s] => 1
                    [l] => 0.5
                )

        )

    [3] => Array
        (
            [name] => Electric Yellow
            [hex] => #ffff33
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 255
                    [b] => 51
                )

            [hsl] => Array
                (
                    [h] => 60
                    [s] => 1
                    [l] => 0.6
                )

            [hsv] => Array
                (
                    [h] => 60
                    [s] => 1
                    [l] => 0.6
                )

        )

    [4] => Array
        (
            [name] => Lincoln Green
            [hex] => #195905
            [rgb] => Array
                (
                    [r] => 25
                    [g] => 89
                    [b] => 5
                )

            [hsl] => Array
                (
                    [h] => 105.71429
                    [s] => 0.89362
                    [l] => 0.18431
                )

            [hsv] => Array
                (
                    [h] => 105.71429
                    [s] => 0.89362
                    [l] => 0.18431
                )

        )

    [5] => Array
        (
            [name] => Mint Green
            [hex] => #98ff98
            [rgb] => Array
                (
                    [r] => 152
                    [g] => 255
                    [b] => 152
                )

            [hsl] => Array
                (
                    [h] => 120
                    [s] => 1
                    [l] => 0.79804
                )

            [hsv] => Array
                (
                    [h] => 120
                    [s] => 1
                    [l] => 0.79804
                )

        )

    [6] => Array
        (
            [name] => Lavender Blue
            [hex] => #ccccff
            [rgb] => Array
                (
                    [r] => 204
                    [g] => 204
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.9
                )

            [hsv] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.9
                )

        )

    [7] => Array
        (
            [name] => Blue
            [hex] => #0000ff
            [rgb] => Array
                (
                    [r] => 0
                    [g] => 0
                    [b] => 255
                )

            [hsl] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.5
                )

            [hsv] => Array
                (
                    [h] => 240
                    [s] => 1
                    [l] => 0.5
                )

        )

    [8] => Array
        (
            [name] => Red Devil
            [hex] => #860111
            [rgb] => Array
                (
                    [r] => 134
                    [g] => 1
                    [b] => 17
                )

            [hsl] => Array
                (
                    [h] => 352.78195
                    [s] => 0.98519
                    [l] => 0.26471
                )

            [hsv] => Array
                (
                    [h] => 352.78195
                    [s] => 0.98519
                    [l] => 0.26471
                )

        )

    [9] => Array
        (
            [name] => Pink
            [hex] => #ffc0cb
            [rgb] => Array
                (
                    [r] => 255
                    [g] => 192
                    [b] => 203
                )

            [hsl] => Array
                (
                    [h] => 349.52381
                    [s] => 1
                    [l] => 0.87647
                )

            [hsv] => Array
                (
                    [h] => 349.52381
                    [s] => 1
                    [l] => 0.87647
                )

        )

)

Any help will be appreciated. Thank you.