5

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

3
  • 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, 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.
    – Vincent
    Feb 6, 2015 at 12:48

2 Answers 2

6

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.

    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(
            (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...

    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.

bonu

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

PS: sorry for extremely messy code

4
  • 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.
    – joojaa
    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!
    – B-Ballerl
    Feb 5, 2015 at 21:54
2

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
  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
  }
2
  • Good answer but I'm not sure the OP is specifically asking about color in CSS.
    – DA01
    Feb 5, 2015 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 ;) Feb 5, 2015 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.