Генератор градиентов и оттенков для Blogger

Продолжаю разговор о полезных инструментах, которые можно установить на свой блог или сайт для посетителей.

Если инструмент понравится и будет востребован и полезен гостям сайта, то посещать ваш ресурс они будут чаще, что даёт огромный плюс для вашего сайта.

Сегодня предлагают посмотреть скрипт генератора градиента и оттенков цвета. Он поможет подобрать посетителю вашего блога цвета для градиента.

Пользователю нужно в окошко вставить код цвета формата #ffffff или ffffff, без #.

Во второе окно - любое цифровое значение.

Нажать на кнопку "Результат".

Кроме этого, в цветной полосе можно подбирать оттенки цвета, кликнуть на понравившийся оттенок и скопировать его код, расположенный рядом с кнопкой "Результат".

Выглядит генератор так:

Установить генератор на Blogger можно на отдельной странице. Добавлять код нужно в редакторе блога в режиме html.

Код генератора

<div style="width: 400px;">
<form>
<p>
Оригинальный цвет: <input type="text" name="orig" value="339990"><br>
Масштабный фактор: <input type="text" name="scalef" value="4"><br>
<input type="button" value="Нажать" onclick="showrainbow(this.form)">
<input type="text" readonly name="outp" style="border: none;">
</p>
</form>

<table width="150">
<tr>
<td width="50%" height="50" id="origcolor">Original</td>
<td width="50%" id="newcolor">New</td></tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<script type="text/javascript">
for (i=0; i<256; i++)
document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
</script>
</tr>
</table>

</div>
<script type="text/javascript">
function colorscale(hexstr, scalefactor) {
  var r = scalefactor;
  var a, i;
  if (r < 0 || typeof(hexstr) != 'string')
    return hexstr;
    hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
    if (hexstr.length == 3) {
    a = hexstr.split('');
  } else if (hexstr.length == 6) {
    a = hexstr.match(/(\w{2})/g);
  } else
    return hexstr;
  for (i=0; i<a.length; i++) {
    if (a[i].length == 2)
      a[i] = parseInt(a[i], 16);
    else {
      a[i] = parseInt(a[i], 16);
      a[i] = a[i]*16 + a[i];
  }
}

var maxColor = parseInt('ff', 16);

function relsize(a) {
  if (a == maxColor)
  return Infinity;
  return a/(maxColor-a);
}

function relsizeinv(y) {
  if (y == Infinity)
  return maxColor;
  return maxColor*y/(1+y);
}

for (i=0; i<a.length; i++) {
  a[i] = relsizeinv(relsize(a[i])*r);
  a[i] = Math.floor(a[i]).toString(16);
  if (a[i].length == 1)
  a[i] = '0' + a[i];
}
return a.join('');
}

function showrainbow(f) {
  var colorcell, hex, i, nhex;
  hex = f.orig.value;
  hex = hex.replace(/\W/g, '');
  nhex = colorscale(hex, f.scalef.value-0);
  if (nhex != hex) {
    f.outp.value = nhex;
    colorcell = document.getElementById('origcolor');
    i = document.getElementById('newcolor');
    colorcell.style.background = '#' + hex;
    i.style.background = '#' + nhex;
    for (i=0; i<256; i++) {
      colorcell = document.getElementById('colorcell'+i);
      nhex = colorscale(hex, i/(256-i));
      colorcell.style.background = '#' + nhex;
      colorcell.nhexvalue = nhex;
    }
  }
}
</script>

В коде можно поменять текст на свой, выделила его красным цветом.