KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: Shading colors lighter and darker
PRODUCT: 4D | VERSION: 11 | PLATFORM: Mac & Win
Published On: November 25, 2009
Your current browser may not allow you to download the asset. We recommend Mozilla Firefox or Google Chrome.
Log In

It can be useful when designing interfaces to use one color hue and then darker and lighter shades of that color. Using the HSL color scheme this is possible and quite easy. For more information on the HSL color scheme see the RGB to HSL colors, and Back! Tech Tip.

The following code takes in as parameters the pointers to RGB color values of a base color and then a real shade value from -1 to 1 to decide whether to darken or lighten the value, and how much to do so. -1 will darken the color to black and 1 will lighten the color to white. The RGB_to_HSL and HSL_to_RGB methods are from the Tech Tip referenced above, RGB to HSL colors, and Back!

RGB shade darkening method
Parameters:
$1, $2, $3: Pointers to R, G, B integer values 0 to 255, afterwards these values contain the new shaded RGB values.
$4: Real value -1 to 1 defining the desired shading. Negative numbers shade darker and positive numbers shade lighter.

C_POINTER($1;$2;$3)
C_LONGINT($color_R_l;$color_G_l;$color_B_l;$color_H_l)
C_REAL($4;$shade_r;$color_S_r;$color_L_r)

$color_R_l:=$1->
$color_G_l:=$2->
$color_B_l:=$3->
$shade_r:=$4

RGB_to_HSL($color_R_l;$color_G_l;$color_B_l;->$color_H_l;->$color_S_r;->$color_L_r)

$color_L_r:=Choose($shade_r>0;$color_L_r/(1+$shade_r);
    Choose($color_L_r*(1-$shade_r)>1;1;$color_L_r*(1-$shade_r)))

$color_S_r:=Choose($shade_r<0;$color_S_r/(1-$shade_r);
    Choose($color_S_r*(1-$shade_r)<1;1;$color_S_r*(1-$shade_r)))

HSL_to_RGB($color_H_l;$color_S_r;$color_L_r;$1;$2;$3)


Note: Two lines in the above code include line breaks. Be careful when copying and pasting code.