Faded Colour Code Calculation


I know multiple programs that calculate colours based on a percentage. I really love when colours are displayed this way as they seem to fade in a non-luminous dull way that is really indicative of a less bold style.

I am just wondering if anyone knows how these new faded colours are calculated based on a starting colour (RGB255 code) and how I might calculate these colours myself?

I am in particular looking for a good faded green that would look good when displayed as minor contours and I feel knowing this process may help me find one. (If you have a suggestion for a colour, please share!)

Colour Fade Examples

2/5/2015 6:33:00 PM

Accepted Answer

There are several ways. By mixing the colors, mathematically:

(1-a)*FGcolor+ a*BGcolor

Would mix the colors as if fg color was alpha blended to bg color. You could blend to white black or any other color. the vairable a i between 0 to 1. Example in python:

from Tkinter import *

def ablend(a, fg, bg):
    return ((1-a)*fg[0]+a*bg[0],

root = Tk()

fg=(100, 200, 170)

for i in range(int(num)+1):
  col = ablend(i/num, fg, bg)
  e = Label(root, text=" "*70, background='#%02x%02x%02x' % col)


This would result in a window that blends colors. You can freely change the bg color.

    resulting window

Image 1: result of code

You could also blend in other ways. like rgb/hsb/hsl interpolation. Sample using hsv interpolation:

from colorsys import rgb_to_hsv, hsv_to_rgb

# replace ablend with hsvblend
def hsvblend(a, fg, bg):
    fgh = rgb_to_hsv(fg[0]/255.,fg[1]/255.,fg[2]/255.)
    bgh = rgb_to_hsv(bg[0]/255.,bg[1]/255.,bg[2]/255.)
    ret = hsv_to_rgb(
    return ret[0]*255,ret[1]*255,ret[2]*255

And so on...

    other blend

Image 2: Using hsv blending

And here is a bonus image showing nonwhite bg that behaves a bit better than fully saturated white.


Image 3: Showing better of the differences between the modes (white and black is problematic for hsv)

PS: sorry for extremely messy code

2/6/2015 12:06:00 PM

Three key options

  • Straight up opacity changes
  • HSB manipulation
  • CSS preprocessors


It's quick and easy but comes with the potential cost of corrupting the color where it overlaps something other than white.

.selector { opacity: .36 ; }


Does a very nice job and gives you more control but comes with the cost of converting between RGB/Hex and another model (there are js libraries to solve that). To lighten and desaturate, the controls are obvious:

  1. Step down the Brightness value
  2. Adjust Saturation to your liking.

Working together, those two channels give you very elegant control over your palette.

CSS preprocessors

Tools like Sass give you quick and easy control over shifting color. This is what most [progressive] UI devs are using on the web today for it's elegant implementation and management. You don't get the opacity problem; you also don't get the fine control of HSB.

$mainColor: #900;
$secondColor: #009;
.useMainColor { 
  color: $mainColor; 
.useLigherMainColor { 
  color: lighten( $mainColor, 60% ); // < lighten it
.useDarkerSecondColor { 
  color: darken( $secondColor, 20% ); // < darken it