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. – AndrewH Feb 5 '15 at 18:58
• There's no simple answer to this. Colors variations can be calculated in a plethora of different ways. – DA01 Feb 5 '15 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. – Vincent Feb 6 '15 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! – plainclothes Feb 5 '15 at 21:33
• @plainclothes well i do have a techical education, so I sometimes do go of tangent into the dark side. – joojaa Feb 5 '15 at 21:36
• Much appreciated. It encourages us all to keep our code chops up to date ;) – plainclothes Feb 5 '15 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! – B-Ballerl Feb 5 '15 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
}

• Good answer but I'm not sure the OP is specifically asking about color in CSS. – DA01 Feb 5 '15 at 19:36
• @DA01 Yeah, I realize there's some "scope creep" in my answer. The first two answers are relevant in most environments. The last is for the likely scenario that others will want to apply this to the interwebs ;) – plainclothes Feb 5 '15 at 19:40