Функция JavaScript для возврата «n» оттенков данного цвета из (темного в светлое) - PullRequest
Новая
       27

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

6 голосов
/ 16 марта 2011

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

Скажем, что пользователь ввел какой-то цвет со значениями 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, с помощью которой этого можно достичь?

Ответы [ 2 ]

11 голосов
/ 16 марта 2011 

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.

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

0 голосов
/ 16 марта 2011

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

Код: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

Информация: http://en.wikipedia.org/wiki/HSL_and_HSV

...