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

• This color shade generator is pretty cool. tutorialrepublic.com/html-reference/html-color-picker.php. select the rgb values and it will show you different light levels of that color. Feb 5, 2015 at 18:58
• There's no simple answer to this. Colors variations can be calculated in a plethora of different ways.
– DA01
Feb 5, 2015 at 19:37
• Imho, calculating a colour is only a tool in finding the right shade. I tend to find calculated values to be close, but eyeballing usually requires a tweak--away from the calculated value. Feb 6, 2015 at 12:48

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

• Wow! You took that in a much more technical direction than I expected on GD.SE! Feb 5, 2015 at 21:33
• @plainclothes well i do have a techical education, so I sometimes do go of tangent into the dark side. Feb 5, 2015 at 21:36
• Much appreciated. It encourages us all to keep our code chops up to date ;) Feb 5, 2015 at 21:39
• This is an amazing answer. I appreciate the technical approach and the further insight in blending colours to get interesting colour pallets. Thanks! Feb 5, 2015 at 21:54

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