Функция JavaScript для возврата" n " оттенков заданного цвета от (темного до светлого)

Я хотел бы получить цветовую гамму определенного цвета для создания облака тегов.

скажем, что пользователь ввел какой-то цвет с RGB/HHHHHH значения тогда я хотел бы написать функцию f(color, no) возвращает RGB/HHHHHH для "Нет "различных оттенков от темного до светлого цветов для указанного"цвета". Эти цвета затем будут полезны для отображения различных тегов с различным цветом того же оттенка. Но я хотел бы избежать в нем черно-белых оттенков.

Ниже приведен пример F({R:0, G:0, B:255}, 7) возвращает 7 оттенки синего.

f({R:0, G:0, B:255}, 7) returns 7 shades of blue

Я бы не хотел, чтобы это было верно для любой комбинации RGB, скажем, например (25, 150,150) также.

возможна ли эта функция с помощью JavaScript или есть какая-либо формула для RGB, с помощью которой это может быть достигнуто?

6
colors graphics javascript rgb

2 ответов

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>

вы хотите что-то подобное на jsbin? Это демо, которое я построил с помощью jQuery.

Дайте мне знать, если у вас есть какие-либо сомнения.

11

вы хотите работать на насыщенности и стоимости, сначала конвертировать rgb в hsv, а затем это очень легко.

код: 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

0