Calculate Different Shades Of A Colour

There are different ways colours are defined the two most popular values in web are HEX or RGB. Both of these values have a logical formula to working out what colour each value means, because of this formula we can easy change these values to work out a lighter and darker shade of a colour.

First you select the colour that you want to start with, then hit submit and this tool will display 15 lighter and 15 darker shades of the same colour. In this article we are going to through the process of how this works and how we can work out different shades of the same colour. The easiest way of getting a different shade of a colour is to use a RGB value for the colour, this is because the higher the value the lighter the colour is, the lower the value the darker the colour is. So all we have to do is take the starting colour value, convert this to RGB and remove or add a percentage of the value. To convert the colour to RGB PHP has a function called hexdec() which we can use to return the decimal value of a hex value. The below function will take the HEX colour and convert it into an array of RGB colours.

function hex2rgb($hex)
{
    return array(
            hexdec(substr($hex,1,2)),
            hexdec(substr($hex,3,2)),
            hexdec(substr($hex,5,2))
        );
}

Now that we have the RGB value we can get a lighter or darker shade by taking a percentage off the RGB value.

function different_shade($rgb, $type)
{
     $newShade = array();
     $percentageChange = 7.5;

     if($type == 'lighter')
     {
         $newShade = Array(
                255-(255-$rgb[0]) + $percentageChange,
                255-(255-$rgb[1]) + $percentageChange,
                255-(255-$rgb[2]) + $percentageChange
            );
     } else {
         $newShade = Array(
                $rgb[0] - $percentageChange,
                $rgb[1] - $percentageChange,
                $rgb[2] - $percentageChange
            );
     }

     return $newShade;
}

Using these two functions you will be able to take a colour and get as different shades of a colour as you want. Remember that the RGB values range from 0 - 255 so make sure that your new colour shade is with in this range.