Full version: jsB@nk » Background » JavaScript Color Gradient Maker
URL: https://www.javascriptbank.com/javascript-color-gradient-maker.html
With this JavaScript code example, you can easy make CSS gradient background, JavaScript color gradient on your web page. Just enter two values for this JavaScript function: one for the colour you would like to make and one for the method to make gradient.That's so cool JavaScript effect to try! You can edit more JavaScript functions from this JavaScript code for your needs.
Full version: jsB@nk » Background » JavaScript Color Gradient Maker
URL: https://www.javascriptbank.com/javascript-color-gradient-maker.html
<script type="text/javascript">// Created by: Joseph Myers | http://www.codelib.net/// This script downloaded from www.JavaScriptBank.comfunction colorscale(hexstr, scalefactor) {/* declared variables first, in order; afterwards, undeclared local variables */ 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><div style="width: 400px;"><form><p>Original color: <input type="text" name="orig" value="339990"><br>Scale factor: <input type="text" name="scalef" value="4"><br><input type="button" value="Output" 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>