Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to generate lighter/darker color with PHP?

Tags:

html

css

php

colors

I have a hex value of some color, for example #202010.

How to generate a new color which is either lighter or darker given in percent (ie. 20% darker) in PHP?

like image 991
eni Avatar asked Aug 18 '10 12:08

eni


People also ask

How do you make a color darker and lighter?

Tints are lighter versions of the color that are made by mixing a color with white, whereas shades are darker versions of the color that are made by mixing a color with black.

How can I make my color slightly darker?

To make a color darker, you need to add black. The more black you add, the darker the color will become. This mixture called 'a shade of the original color'. In color theory, a real shade is defined as a pure color mixed with only black.

How do you make a slightly darker hex code?

A hex colour such as #FCFCFC consists of three pairs representing RGB. The second part of each pair can be reduced to darken any colour without altering the colour considerably. Reducing the first part of each pair by a small amount will also darken the colour, but you will start to affect the colour more (eg.

How do you create a lighter value of a color?

By adding black to the color, the value is made darker, resulting in what is referred to as a “shade”. When white is added to a color, the result is a lighter value. Lighter values are referred to as “tints”. An example can be seen with the color red.


3 Answers

Adjusting colour by percent, as in the example given by Frxstrem, is not ideal.

If your colour is black (0,0,0 in RGB), you will be multiplying by zero, which will not yield any change at all. If your colour is dark gray (for instance 2,2,2 in RGB), you will have to lighten by 50% to just move up to (3,3,3). On the other hand, if you have an RGB colour of (100,100,100), the adjustment of 50% will move you up to (150,150,150), which is a much bigger change in comparison.

A much better solution would be to adjust by step/number (0-255) instead of by percent, for instance like this (PHP code):

Edit 2014-01-06: Cleaned up the code a bit.

function adjustBrightness($hex, $steps) {
    // Steps should be between -255 and 255. Negative = darker, positive = lighter
    $steps = max(-255, min(255, $steps));

    // 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);
    }

    // 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;
}
like image 52
Torkil Johnsen Avatar answered Sep 22 '22 02:09

Torkil Johnsen


Torkil Johnsen's answer is based on fixed step which doesn't manipulate only brightness but also slightly changes the hue. Frxstrem's method has flaws too as Torkil Johnsen noted.

I've taken this approach from a Github comment and improved the code. It works perfectly for any case.

/**
 * Increases or decreases the brightness of a color by a percentage of the current brightness.
 *
 * @param   string  $hexCode        Supported formats: `#FFF`, `#FFFFFF`, `FFF`, `FFFFFF`
 * @param   float   $adjustPercent  A number between -1 and 1. E.g. 0.3 = 30% lighter; -0.4 = 40% darker.
 *
 * @return  string
 *
 * @author  maliayas
 */
function adjustBrightness($hexCode, $adjustPercent) {
    $hexCode = ltrim($hexCode, '#');

    if (strlen($hexCode) == 3) {
        $hexCode = $hexCode[0] . $hexCode[0] . $hexCode[1] . $hexCode[1] . $hexCode[2] . $hexCode[2];
    }

    $hexCode = array_map('hexdec', str_split($hexCode, 2));

    foreach ($hexCode as & $color) {
        $adjustableLimit = $adjustPercent < 0 ? $color : 255 - $color;
        $adjustAmount = ceil($adjustableLimit * $adjustPercent);

        $color = str_pad(dechex($color + $adjustAmount), 2, '0', STR_PAD_LEFT);
    }

    return '#' . implode($hexCode);
}

Here is an example result:

example

like image 24
maliayas Avatar answered Sep 20 '22 02:09

maliayas


The answers are wrong.

Using RGB model is a conceptual error.

You need to transform the color from RGB (or Hex form) into HSL.

That is Hue, Saturation, Lightness.

Once you convert it from RGB into HSL, to lighten up the color you simply adjust the L value (lightness) by 10%. Then once you are done you convert back from HSL to RGB and you are done.

Voila!

RGB to HSV in PHP

like image 34
Rod Avatar answered Sep 24 '22 02:09

Rod