### Question

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!)

2015/02/05
1
5
2/5/2015 6:33:00 PM

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],
(1-a)*fg[1]+a*bg[1],
(1-a)*fg[2]+a*bg[2])

root = Tk()
num=8.0

fg=(100, 200, 170)
bg=(255,255,255)

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

root.mainloop()
``````

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

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(
(1-a)*fgh[0]+a*bgh[0],
(1-a)*fgh[1]+a*bgh[1],
(1-a)*fgh[2]+a*bgh[2])
return ret[0]*255,ret[1]*255,ret[2]*255
``````

And so on...

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

2015/02/06
5
2/6/2015 12:06:00 PM

## Three key options

• Straight up opacity changes
• HSB manipulation
• CSS preprocessors

## Opacity

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 ; }
``````

## HSB

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

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
}
``````
2015/02/05