PHP Adjust Colour Brightness | The Ramblings of a Front-End Developer

If you just want the function and don’t want to read the rubbish of why I used it then see below my good chum…

Use Case

I have recently been working on a template built on Drupal, which allows the user to select their own colours using the color module.

One feature within the design is to have certain elements that would have a background/border colour that contrasts the background colour select by the user.

I originally used CSS to archive this.

.cta__bg-color {
  background-color: rgba(210, 210, 210, 0.7);
}

.cta__border-color {
  border-color: rgba(210, 210, 210, 0.7);
}

This works cross browser, but will only work 99% of the time… not good enough for me.

With this CSS if the user selects a HEX colour the matches the RGBA then the background/border colour will disappear.

So I decided go down the PHP route to set the colour for these elements via the use of hook_form_validate() function and before the form is submitted to the Color Module. A extra field was set up to hold the new colour (hidden for the user of course) and before the form is submitted, I get the background colour from the form and pass it into my adjustBrightness function.

function adjustBrightness($hex, $percent) {

    // Normalize into a six character long hex string
    $hex = str_replace('#', '', $hex);
    if (strlen($hex) == 3) {
        $hex = str_repeat(substr($hex,0,1), 2).str_repeat(substr($hex,1,1), 2).str_repeat(substr($hex,2,1), 2);
    }

    // Get the shade of the hex color
    $shade = (hexdec($hex) > 0xffffff/2) ? 'dark':'light';

    // Steps should be between -255 and 255. Negative = darker, positive = lighter
    $brightness = ($shade == 'light') ? 255 : -255;
    $steps = $percent*$brightness/100;

    // Split into three parts: R, G and B
    $color_parts = str_split($hex, 2);
    $return = '#';

    foreach ($color_parts as $color) {
        $color   = hexdec($color); // Convert to decimal
        $color   = max(0,min(255,$color + $steps)); // Adjust color
        $return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
    }
    return $return;
}

Input: adjustBrightness('#141e33', 6);
Output: #232d42

So first off it doesn’t matter if a 3 or 6 character HEX is passed in, it will sort it out for you. Then based on if the colour is a dark or light shade then adjust the brightness accordingly based on the percentage passed in and return the HEX value.

Set the new HEX value to the field I set up in the Color Module, Bish Bash Bosh :)

Menu

Use Case