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.

convert the [`RGB`](http://en.wikipedia.org/wiki/RGB) value to [`HSL`](http://en.wikipedia.org/wiki/HSL_and_HSV) and adjust the level and then convert back to `RGB` — Esailija, Jun 18 '12 at 22:00
possible duplicate of [How do I determine darker or lighter color variant of a given color?](http://stackoverflow.com/questions/97646/how-do-i-determine-darker-or-lighter-color-variant-of-a-given-color) — DaveRandom, Jun 18 '12 at 22:01
Its not a duplicate. Im looking for php or jquery, that guy wants C# — David Lawrence, Jun 18 '12 at 22:02
So you want code you can blindly copy paste and have it work? — Esailija, Jun 18 '12 at 22:03
This might help: http://stackoverflow.com/questions/5833624/increase-css-brightness-color-on-click-with-jquery-javascript — mqchen, Jun 18 '12 at 22:03
No I have a forum, that allows the admin to set a color for all the links and stuff for the forum category, they enter a color code, and from there I want to be able to make different hover colors and stuff — David Lawrence, Jun 18 '12 at 22:04
I don't understand why I'm getting negative scores on this question, it hasn't been asked yet, and its a very plausible helpful question to future people? — David Lawrence, Jun 18 '12 at 22:10
@DavidLawrence The reason is that you are asking for code, but you have no understanding of the underlying algorithm. Given an algorithm implemented in c# or actionscript, any competent programmer can write it in another language. We assume you have some cursory knowledge of programming, and can do basic translation between languages given minimal effort. — gcochard, Jun 18 '12 at 22:13
@DavidLawrence This principle is exactly the same as the accepted answer to teh question I linked. [Example](http://codepad.viper-7.com/QA3Zu8). — DaveRandom, Jun 18 '12 at 22:19
LoL I understand I asked a bad question, my bad. Sometimes this happens. Shoulda put more effort into it. — David Lawrence, Jun 18 '12 at 22:21
@DavidLawrence It's all good, we all have our blind spots - if you check my question history you will find a similar embarrassment at the bottom of the list o_O. I will say though that the suggestions of various people to convert to an HSV/HSL colour model for doing stuff like this are a good idea, they are designed specifically to accommodate this kind of adjustment much more easily as you only have to adjust one element instead of all three. — DaveRandom, Jun 18 '12 at 22:36
@DaveRandom Yea that sounds really hard though. Maybe it isn't, but I'm a little intimidated by the terminology, HSV and HSL. They seem way more complicated from what I already dont understand RGB. — David Lawrence, Jun 18 '12 at 22:51

score 5 · Accepted Answer · edited Jun 18 '12 at 22:41

5

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!

edited Jun 18 '12 at 22:41

DaveRandom

87,921
11
154
174

answered Jun 18 '12 at 22:04

Niet the Dark Absol

320,036
81
464
592

Perfect. Thanks so much, might I ask how much lighter or darker this makes the color? How would I control it so it only makes it slightly lighter or slightly darker? – David Lawrence Jun 18 '12 at 22:07
All those `/2` bits could be better written as `*0.5` - that's the 50% I mentioned above. You can adjust that amount to get more or less light/dark. – Niet the Dark Absol Jun 18 '12 at 22:14
Thanks :) I appreciate it. Shoulda figured it was the /2. – David Lawrence Jun 18 '12 at 22:16
https://github.com/mbostock/d3/blob/master/src/core/rgb.js d3 library has an implementation of lighter and darker. – sabithpocker Jun 18 '12 at 22:16

score 5 · Answer 2 · answered Jul 22 '13 at 18:03

5

I recommend using the TinyColor color manipulation microframework for this.

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

answered Jul 22 '13 at 18:03

Druska

4,752
2
30
34

`tinycolor("#f00").lighten().toString(); // "#ff3333" - lighten tinycolor("#f00").darken().toString(); // "#cc0000" - darken` – RicardO Mar 24 '15 at 07:33

gcochard · Answer 3 · 2012-06-18T22:17:07.420

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.

Um... You missed the conversion from hex-dec and dec-hex in your code ;) — Niet the Dark Absol, Jun 18 '12 at 22:07
@Kolink Yeah, I realized that right after I posted it. It's fixed now. — gcochard, Jun 18 '12 at 22:07
Hate to disappoint, Greg, but what if, for instance, `r=4`, `g=20` and `b=9`? The result is `#4149` — Niet the Dark Absol, Jun 18 '12 at 22:13

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

3 Answers3