how to find the hex code for a lighter or darker version of a hex code in php

Question

I'm trying to achieve what this guy here is doing, only in PHP or jQuery. Basically I have a hex color code, say #FF0000, which is red. How would I find darker or lighter hex color codes of this color.

To clearify: I want to take a hex color code (#FF0000), and find the correct hex color code of lighter or darker shades of that color code.

Either done in PHP, or jQuery, something that I can change the color via PHP, as the server processes the page.

I prefer not to use third party jQuery plugins to achieve this, but I will if its super duper complicated.

Answer 1

When you say "a lighter version" (or "a darker version") there are a very large number of possibilities. For instance, you could take #ff0000 and have 253 "darker versions" ranging from #010000 to #fe0000. Similarly, you can have 253 "lighter versions" ranging from #ff0101 to #fffefe. So your question is not very well defined.

I will assume in this answer that by "lighter version", you mean the result of overying a 50% transparent white on the colour, and by "darker" the same but black.

In any case, you should always start by extracting the numbers from the hex code:

// assuming input of form "#RRGGBB"
$col = Array(
    hexdec(substr($input,1,2)),
    hexdec(substr($input,3,2)),
    hexdec(substr($input,5,2))
);

Now that you have that, you can easily apply the "overlay":

$darker = Array(
    $col[0]/2,
    $col[1]/2,
    $col[2]/2
);
$lighter = Array(
    255-(255-$col[0])/2,
    255-(255-$col[1])/2,
    255-(255-$col[2])/2
);

Then it's a simple matter to convert them back into hex codes:

$darker = "#".sprintf("%02X%02X%02X", $darker[0], $darker[1], $darker[2]);
$lighter = "#".sprintf("%02X%02X%02X", $lighter[0], $lighter[1], $lighter[2]);

Done!

Answer 2

I recommend using the TinyColor color manipulation microframework for this.

tinycolor.darken('#FF0000').toHexString()

Answer 3

All you have to do is split the hex code into it's R G and B values, and then run this part of the actionscript on them:

factor = percent/100;
r+=(255-r)*factor;
b+=(255-b)*factor;
g+=(255-g)*factor;

So the full functions would be something like this in pure javascript:

function lighten(color,percent){
    factor = percent/100;
    r = parseInt(color.substring(1,2),16);
    b = parseInt(color.substring(3,4),16);
    g = parseInt(color.substring(5,6),16);
    r+=(255-r)*factor;
    r=r.toString(16);
    if(r.length==1)
        r = '0'+r;
    b+=(255-b)*factor;
    b=b.toString(16);
    if(b.length==1)
        b = '0'+b;
    g+=(255-g)*factor;
    g=g.toString(16);
    if(g.length==1)
        g = '0'+g;
    return "#"+r+g+b;
}

and

function darken(color,percent){
    factor = percent/100;
    r = parseInt(color.substring(1,2),16);
    b = parseInt(color.substring(3,4),16);
    g = parseInt(color.substring(5,6),16);
    r-=(255-r)*factor;
    r=r.toString(16);
    if(r.length==1)
        r = '0'+r;
    b-=(255-b)*factor;
    b=b.toString(16);
    if(b.length==1)
        b = '0'+b;
    g-=(255-g)*factor;
    g=g.toString(16);
    if(g.length==1)
        g = '0'+g;
    return "#"+r+g+b;
}

You can intermix pure javascript and jQuery, so this should work just fine.