134

Given an RGB value, like 168, 0, 255, how do I create tints (make it lighter) and shades (make it darker) of the color?

sponge
  • 7,923
  • 13
  • 43
  • 77
DenaliHardtail
  • 24,560
  • 51
  • 134
  • 216

3 Answers3

163

Among several options for shading and tinting:

  • For shades, multiply each component by 1/4, 1/2, 3/4, etc., of its previous value. The smaller the factor, the darker the shade.

  • For tints, calculate (255 - previous value), multiply that by 1/4, 1/2, 3/4, etc. (the greater the factor, the lighter the tint), and add that to the previous value (assuming each.component is a 8-bit integer).

Note that color manipulations (such as tints and other shading) should be done in linear RGB. However, RGB colors specified in documents or encoded in images and video are not likely to be in linear RGB, in which case a so-called inverse transfer function needs to be applied to each of the RGB color's components. This function varies with the RGB color space. For example, in the sRGB color space (which can be assumed if the RGB color space is unknown), this function is roughly equivalent to raising each sRGB color component (ranging from 0 through 1) to a power of 2.2. (Note that "linear RGB" is not an RGB color space.)

See also Violet Giraffe's comment about "gamma correction".

Peter O.
  • 28,965
  • 14
  • 72
  • 87
  • 25
    I tried this out and it worked great. I thought it would be helpful to write examples of the formulas. Original (r,g,b); Shade (rs,gs,bs): `rs = r * 0.25`, `gs = g * 0.25`, `bs = b * 0.25` (that is a pretty dark shade); Tint (rt,gt,bt): `rt = r + (0.25 * (255 - r))`, `gt = g + (0.25 * (255 - g))`, `bt = b + (0.25 * (255 - b))` (that is a pretty light tint). I did it as part of a cool array that created lots of hues and it worked great. Hope that helps. Thanks Peter. – Thomas Feb 19 '14 at 00:41
  • 1
    You have made a mistake. It is viceversa. – sponge Dec 24 '14 at 07:22
  • Are you sure these manipulation must not account for gamma correction? – Violet Giraffe Jun 06 '16 at 11:06
  • 1
    @VioletGiraffe: You make a good point with gamma correction. See my edit. (This replaces a deleted comment of mine from 22 hours ago.) – Peter O. Jan 26 '17 at 21:17
110

Some definitions

  • A shade is produced by "darkening" a hue or "adding black"
  • A tint is produced by "ligthening" a hue or "adding white"

Creating a tint or a shade

Depending on your Color Model, there are different methods to create a darker (shaded) or lighter (tinted) color:

  • RGB:

    • To shade: 

      newR = currentR * (1 - shade_factor)
newG = currentG * (1 - shade_factor)
newB = currentB * (1 - shade_factor)

    • To tint:

      newR = currentR + (255 - currentR) * tint_factor
newG = currentG + (255 - currentG) * tint_factor
newB = currentB + (255 - currentB) * tint_factor

    • More generally, the color resulting in layering a color RGB(currentR,currentG,currentB) with a color RGBA(aR,aG,aB,alpha) is:

      newR = currentR + (aR - currentR) * alpha
newG = currentG + (aG - currentG) * alpha
newB = currentB + (aB - currentB) * alpha

    where (aR,aG,aB) = black = (0,0,0) for shading, and (aR,aG,aB) = white = (255,255,255) for tinting

  • HSV or HSB:

    • To shade: lower the Value / Brightness or increase the Saturation
    • To tint: lower the Saturation or increase the Value / Brightness
  • HSL:
    • To shade: lower the Lightness
    • To tint: increase the Lightness

There exists formulas to convert from one color model to another. As per your initial question, if you are in RGB and want to use the HSV model to shade for example, you can just convert to HSV, do the shading and convert back to RGB. Formula to convert are not trivial but can be found on the internet. Depending on your language, it might also be available as a core function :

Comparing the models

  • RGB has the advantage of being really simple to implement, but:
    • you can only shade or tint your color relatively
    • you have no idea if your color is already tinted or shaded
  • HSV or HSB is kind of complex because you need to play with two parameters to get what you want (Saturation & Value / Brightness)
  • HSL is the best from my point of view:
    • supported by CSS3 (for webapp)
    • simple and accurate:
      • 50% means an unaltered Hue
      • >50% means the Hue is lighter (tint)
      • <50% means the Hue is darker (shade)
    • given a color you can determine if it is already tinted or shaded
    • you can tint or shade a color relatively or absolutely (by just replacing the Lightness part)
Community
  • 1
  • 1
JBE
  • 9,856
  • 6
  • 45
  • 44
  • 1
    I believe in here _"A shade is produced by "darkening" a hue"_, by hue, you mean the color. Because if you're talking about hue as in HSL/HSV, changing it will produce a different color, not a shade/tint. Hue (0-360°), by itself, can't get darker/lighter. To give a color shade/tint, one would have to modify SL/SV values. This definition might mislead someone into thinking changing the hue will produce a darker/lighter color. – akinuri Nov 16 '17 at 06:03
  • The shade version only works for colors range starting from 0. Add Half of your color range to the color channel value,then do the math then subtract that range again. If your color is signed and you can do the calculation without destroying something because of overflow this works as intended. – t0b4cc0 Mar 01 '18 at 19:59
3

I'm currently experimenting with canvas and pixels... I'm finding this logic works out for me better.

  1. Use this to calculate the grey-ness ( luma ? )
  2. but with both the existing value and the new 'tint' value
  3. calculate the difference ( I found I did not need to multiply )

  4. add to offset the 'tint' value

    var grey =  (r + g + b) / 3;    
var grey2 = (new_r + new_g + new_b) / 3;

var dr =  grey - grey2 * 1;    
var dg =  grey - grey2 * 1    
var db =  grey - grey2 * 1;  

tint_r = new_r + dr;    
tint_g = new_g + dg;   
tint_b = new_b _ db;

or something like that...

Himanshu
  • 4,224
  • 16
  • 28
  • 36
Blair
  • 31
  • 2