Question

For example I have a blue color:

#049cd9 or rgba(4, 156, 218)

How can I calculate the correspondent color, which in this case it would be a dark blue color:

#004ea0 or rgba(0, 78, 160)

?

Normally I don’t know the 2nd color (that I want to find out), so I want to find a way to get the darker color based on the first color.

Is there a formula or something that I can generate by substracting the two colors somehow?

---

So I’ve found HEX to HSL and HSL to HEX functions:

function hex_to_hue($hexcode)
{
    $redhex  = substr($hexcode,0,2);
    $greenhex = substr($hexcode,2,2);
    $bluehex = substr($hexcode,4,2);

    // $var_r, $var_g and $var_b are the three decimal fractions to be input to our RGB-to-HSL conversion routine
    $var_r = (hexdec($redhex)) / 255;
    $var_g = (hexdec($greenhex)) / 255;
    $var_b = (hexdec($bluehex)) / 255;

    // Input is $var_r, $var_g and $var_b from above
    // Output is HSL equivalent as $h, $s and $l — these are again expressed as fractions of 1, like the input values

    $var_min = min($var_r,$var_g,$var_b);
    $var_max = max($var_r,$var_g,$var_b);
    $del_max = $var_max - $var_min;

    $l = ($var_max + $var_min) / 2;

    if ($del_max == 0) {
        $h = 0;
        $s = 0;
    } else {
        if ($l < 0.5) {
            $s = $del_max / ($var_max + $var_min);
        } else {
            $s = $del_max / (2 - $var_max - $var_min);
        }
        ;

        $del_r = ((($var_max - $var_r) / 6) + ($del_max / 2)) / $del_max;
        $del_g = ((($var_max - $var_g) / 6) + ($del_max / 2)) / $del_max;
        $del_b = ((($var_max - $var_b) / 6) + ($del_max / 2)) / $del_max;

        if ($var_r == $var_max) {
            $h = $del_b - $del_g;
        } else if ($var_g == $var_max) {
            $h = (1 / 3) + $del_r - $del_b;
        } else if ($var_b == $var_max) {
            $h = (2 / 3) + $del_g - $del_r;
        }
        ;

        if ($h < 0) {
            $h += 1;
        }
        ;

        if ($h > 1) {
            $h -= 1;
        }
        ;
    }
    ;

    return array($h, $s, $l);

    /*
// Calculate the opposite hue, $h2
$h2 = $h + 0.5;
if ($h2 > 1)
{
$h2 -= 1;
};

return array($h2, $s, $l);
*/

}



function hue_to_hex($hue = array())
{
    function hue_2_rgb($v1,$v2,$vh)
    {
        if ($vh < 0) {
            $vh += 1;
        }
        ;

        if ($vh > 1) {
            $vh -= 1;
        }
        ;

        if ((6 * $vh) < 1) {
            return($v1 + ($v2 - $v1) * 6 * $vh);
        }
        ;

        if ((2 * $vh) < 1) {
            return($v2);
        }
        ;

        if ((3 * $vh) < 2) {
            return($v1 + ($v2 - $v1) * ((2 / 3 - $vh) * 6));
        }
        ;

        return($v1);
    }
    ;


    list($h2, $s, $l) = $hue;

    // Input is HSL value of complementary colour, held in $h2, $s, $l as fractions of 1
    // Output is RGB in normal 255 255 255 format, held in $r, $g, $b
    // Hue is converted using function hue_2_rgb, shown at the end of this code

    if ($s == 0) {
        $r = $l * 255;
        $g = $l * 255;
        $b = $l * 255;
    } else {
        if ($l < 0.5) {
            $var_2 = $l * (1 + $s);
        } else {
            $var_2 = ($l + $s) - ($s * $l);
        }
        ;

        $var_1 = 2 * $l - $var_2;
        $r = 255 * hue_2_rgb($var_1,$var_2,$h2 + (1 / 3));
        $g = 255 * hue_2_rgb($var_1,$var_2,$h2);
        $b = 255 * hue_2_rgb($var_1,$var_2,$h2 - (1 / 3));
    }
    ;


    $rhex = sprintf("%02X",round($r));
    $ghex = sprintf("%02X",round($g));
    $bhex = sprintf("%02X",round($b));

    return $rhex.$ghex.$bhex;
}

They work because I tested them by converting a color back and forth.

But I don’t know how can I change the Hue and Luminosity properties just like in Photoshop?
The dark color would be H +13 and L -28.

And the hex_to_hsl function above returns float values between 0 and 1…

Answer 1

There are formulas that convert an RGB color to HSV (Hue, Saturation and Value). From the HSV you can change any of the HSV components and then convert back to RGB. I’ve found stuff online and done this before. Let me know if you want more details on the algorithms, I can dig them up for you if you want.