Tints and shades provide additional color options for a GUI or website without clashing with its underlying color scheme. It is not entirely clear, however, just how in general to derive tints mathematically from a base color. Here, I'm going to present 2 simple formulas for deriving shades and for deriving tints. I'll then use the color scheme of this website to show the color range defined by each formula. While these formulas leave out many of the complications associated with saturation issues, I think they are still quite usable.

Shades

For darkening or shading a color, the basic formula seems pretty obvious: If x, y and z are the red, green and blue arguments for the original color (let's say '#xyz' representing each number as a 2-digit hex value), and you want a shade representing amount s0 (<=1) of '#xyz', then the shade should be '#abc' where a = s0 * x, b = s0 * y, and c = s0 * z, again using 2-digit hexadecimal representations when converting to strings.

Note first that in each case the brightest color uses 0xff (decimal 255) for one of its rgb components, and 0xff of course represents the maximum allowable intensity. Once we reach that number, we can no longer increase each component proportionally within the numeric framework of the rgb encoding.

Secondly, this method produces shades equivalent to those an artist would create by adding black to a base color. With a specific color scheme, one certainly might also want to weight the shading toward one or another part of the spectrum. For example, if you want your color to have blue shades, you might want to reduce the red and green components disproportionately to the blue rather than reducing all 3 components in the same proportion. Given the subjectively determined weighting for the shading, one could certainly also look for appropriate transformations of our simple linear formula, but I'm not going to examine such issues here.