Función de JavaScript para devolver tonos "n" de un color determinado de (oscuro a claro)

Question

Me gustaría obtener el rango de color del color específico para generar la nube de etiquetas.

decir que el usuario ha introducido un poco de color con valores RGB/HHHHHH entonces me gustaría escribir una función que devuelve f(color, no)RGB/HHHHHH para "no" de diferentes tonos de oscuro a tonos claros para el uso especificado "color". Estos colores serán útiles para mostrar las diferentes etiquetas con diferentes colores del mismo tono. Pero me gustaría evitar las sombras en blanco y negro.

El siguiente es un ejemplo de F({R:0, G:0, B:255}, 7) que devuelve 7 tonos de azul.

No me gustaría que fuera verdad para cualquier combinación RGB decir, por ejemplo (25, 150,150) también.

¿Es posible esta función utilizando JavaScript o existe alguna fórmula para RGB con la que se pueda lograr esto?

Answer 1

function generate() 
 
{ 
 
    var r = document.querySelector("#R").value%256; 
 
    var g = document.querySelector("#G").value%256; 
 
    var b = document.querySelector("#B").value%256; 
 
    var str=""; 
 
    for(var i=0;i<7;i++) 
 
    { 
 
    r+=33; 
 
    g+=33; 
 
    b+=33; 
 
    str+="<div class='swatch' style='background-color:rgb("+r+","+g+","+b+")'></div>"; 
 
    } 
 
    document.querySelector("#op").innerHTML = str; 
 
    console.log(str); 
 
}

.swatch{width:50px;height:25px;margin:1px}

<div>R<input type="text" id="R"/></div> 
 
<div>G<input type="text" id="G"/></div> 
 
<div>B<input type="text" id="B"/></div> 
 
<input type="button" onclick="generate()" value="Generate"/> 
 
<div id="op">Generated Color shades</div>

¿Quieres algo como esto en jsbin? Esta es una demostración que he creado usando jQuery.

Avísame si tienes alguna duda.

Answer 2

Quiere operar en saturación y valor, primero convierta rgb a hsv y luego es muy fácil.

Código: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

Info: http://en.wikipedia.org/wiki/HSL_and_HSV