Cálculo del código de color difuminado

Hay varias formas. Mezclando los colores, matemáticamente:

(1-a)*FGcolor+ a*BGcolor

Mezclaría los colores como si el color fg se mezclara alfa con el color bg. Podrías mezclar con blanco, negro o cualquier otro color. la variable ai entre 0 y 1. Ejemplo en 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()

Esto daría como resultado una ventana que mezcla colores. Puede cambiar libremente el color bg.

Imagen 1: resultado del código

También puedes mezclar de otras maneras. como la interpolación rgb/hsb/hsl. Muestra usando la interpolación hsv:

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

Y así...

Imagen 2: Uso de la mezcla hsv

Y aquí hay una imagen adicional que muestra un fondo no blanco que se comporta un poco mejor que el blanco completamente saturado.

Imagen 3: mostrando mejor las diferencias entre los modos (el blanco y el negro son problemáticos para hsv)

PD: perdón por el código extremadamente desordenado

Tres opciones clave

• Cambios directos de opacidad
• manipulación HSB
• preprocesadores CSS

Opacidad

Es rápido y fácil, pero tiene el costo potencial de corromper el color donde se superpone a algo que no sea blanco.

.selector { opacity: .36 ; }

HSB

Hace un muy buen trabajo y le brinda más control, pero tiene el costo de convertir entre RGB/Hex y otro modelo (hay bibliotecas js para resolver eso). Para aclarar y desaturar, los controles son obvios:

1. Reduzca el valor de rectitud de B
2. Ajuste la saturación a su gusto.

Trabajando juntos, esos dos canales le brindan un control muy elegante sobre su paleta.

preprocesadores CSS

Herramientas como Sass le brindan un control rápido y fácil sobre el cambio de color. Esto es lo que la mayoría de los desarrolladores de UI [progresivos] están usando en la web hoy en día por su elegante implementación y administración. No tienes el problema de la opacidad; tampoco obtienes el control fino de HSB.

$mainColor: #900;
$secondColor: #009;
.useMainColor { 
  color: $mainColor; 
  }
.useLigherMainColor { 
  color: lighten( $mainColor, 60% ); // < lighten it
  }
.useDarkerSecondColor { 
  color: darken( $secondColor, 20% ); // < darken it
  }