Hi Guys,
Just a thought and following up on my previous post is a function that you can use in your PHP code to brighten or darken a HEX or a RGB color, For color manipulation in JavaScript you can look at this cool library https://github.com/jfsiii/chromath
PHP Function
Below is the function you can use to make on the fly adjustment to colors
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * @param $color_code * @param int $percentage_adjuster * @return array|string * @author Jaspreet Chahal */ function adjustColorLightenDarken($color_code,$percentage_adjuster = 0) { $percentage_adjuster = round($percentage_adjuster/100,2); if(is_array($color_code)) { $r = $color_code["r"] - (round($color_code["r"])*$percentage_adjuster); $g = $color_code["g"] - (round($color_code["g"])*$percentage_adjuster); $b = $color_code["b"] - (round($color_code["b"])*$percentage_adjuster); return array("r"=> round(max(0,min(255,$r))), "g"=> round(max(0,min(255,$g))), "b"=> round(max(0,min(255,$b)))); } else if(preg_match("/#/",$color_code)) { $hex = str_replace("#","",$color_code); $r = (strlen($hex) == 3)? hexdec(substr($hex,0,1).substr($hex,0,1)):hexdec(substr($hex,0,2)); $g = (strlen($hex) == 3)? hexdec(substr($hex,1,1).substr($hex,1,1)):hexdec(substr($hex,2,2)); $b = (strlen($hex) == 3)? hexdec(substr($hex,2,1).substr($hex,2,1)):hexdec(substr($hex,4,2)); $r = round($r - ($r*$percentage_adjuster)); $g = round($g - ($g*$percentage_adjuster)); $b = round($b - ($b*$percentage_adjuster)); return "#".str_pad(dechex( max(0,min(255,$r)) ),2,"0",STR_PAD_LEFT) .str_pad(dechex( max(0,min(255,$g)) ),2,"0",STR_PAD_LEFT) .str_pad(dechex( max(0,min(255,$b)) ),2,"0",STR_PAD_LEFT); } } |
For sure above function can have less lines but for simplicity and readability I think putting it as above makes sense.
Usage – Lightning Colors
|
1 2 3 4 5 6 7 8 9 10 11 12 |
print_r(adjustColorLightenDarken(array("r"=>204, "g"=>136, "b"=>0),-5)); //outputs //Array //( // [r] => 214 // [g] => 143 // [b] => 0 //) print_r(adjustColorLightenDarken("#C80",-5)); // outputs #d68f00 |
Usage – Darkening Colors
|
1 2 3 4 5 6 7 8 9 10 11 12 |
print_r(adjustColorLightenDarken(array("r"=>204, "g"=>136, "b"=>0),5)); //outputs //Array //( // [r] => 194 // [g] => 129 // [b] => 0 //) print_r(adjustColorLightenDarken("#C80",5)); // outputs #c28100 |
Now lets check the JavaScript implementation of this function.
JavaScript Equivalent Function For Lightening and Darkening HEX or RGB Colors
You can definitely do better job with shift operators but I always think of readability of code first. The code below can be shrunk but at least you get the Idea what’s happening in a typical way
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function adjustcolororLightenDarken(color, percent) { $percentage_adjuster = percent/100; if(color instanceof Object == false && color.charAt(0) == '#') { var shortColorCode = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; color = color.replace(shortColorCode, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); console.log($percentage_adjuster) if(result) { result = { r: Math.max(0,Math.min(255,Math.round(parseInt(result[1], 16) - (Math.round((parseInt(result[1], 16))*$percentage_adjuster) )))).toString(16), g: Math.max(0,Math.min(255,Math.round(parseInt(result[2], 16) - (Math.round((parseInt(result[2], 16))*$percentage_adjuster) )))).toString(16), b: Math.max(0,Math.min(255,Math.round(parseInt(result[3], 16) - (Math.round((parseInt(result[3], 16))*$percentage_adjuster) )))).toString(16) } } return "#"+result.r+result.g+result.b; } else if(color instanceof Object && color.r) { result = { r: Math.max(0,Math.min(255,Math.round(parseInt(color.r) - (Math.round((parseInt(color.r))*$percentage_adjuster) )))), g: Math.max(0,Math.min(255,Math.round(parseInt(color.g) - (Math.round((parseInt(color.g))*$percentage_adjuster) )))), b: Math.max(0,Math.min(255,Math.round(parseInt(color.b) - (Math.round((parseInt(color.b))*$percentage_adjuster) )))) } return result; } } |
Usage 1 – Lighten
|
1 2 3 4 |
console.log(adjustcolororLightenDarken("#eeeeee",-5)); // outputs #fafafa console.log(adjustcolororLightenDarken({r:238,g:238,b:238},-5)); // outputs Object {r: 250, g: 250, b: 250} |
Now lets check how we can use the same function to Darken our Hex or RBG colors
Usage 2 – Darken
|
1 2 3 4 |
console.log(adjustcolororLightenDarken("#eeeeee",-5)); // outputs #e2e2e2 console.log(adjustcolororLightenDarken({r:238,g:238,b:238},-5)); // outputs Object {r: 226, g: 226, b: 226} |
I hope this helps.
Got a better implementation of these function. I would love to know and this will help my readers too. Share it, leave your comments
Cheers
You used -5 for both lighten and darken at the bottom here. Check out https://github.com/Qix-/color and https://bgrins.github.io/TinyColor/
Actually I suggest changing this part for the PHP implementantion:
$r = round($r – ($r*$percentage_adjuster));
to
$r = round($r – (255*$percentage_adjuster));
For the three colors. On your current implementation you’re chaning the color based on a parcentage of itself, and not on a max scale percentage. So, darkening a color in 10% should reduce the color ($r) by 25,5 points (10% of 255) and not by 10% of it’s current value.
It does not works for me with black color #000000, color stills every time #000000