: 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

@Yeniel278

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

Vote Up Vote Down

@Ravi4787994

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:


Step down the Brightness value
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
}

Vote Up Vote Down