4umi.com/web/javascript/gradient

Gradient

Math Javascript

A gradient is a series of values at logically arranged intervals between two extremes. The difference between the two extremes, divided by the number of items, gives the step value for a flat, evenly spread gradient. The value may be numerical, or anything that can be evaluated to a numerical value, such as colours.

Number to number

For reasons of convenience, numbers are displayed rounded to a maximum of three decimals. The calculations are however performed on the real numbers naturally.

Values
Result

The script

Mouse over to highlight or doubleclick to read more about the various items.

function gradient( f ) {
 f = f.elements;
 var a, i = 0,
  v1 = +f.v1.value || 0,
  v2 = +f.v2.value || 0,
  vn = +f.steps.value || 1,
  n = vn + 1,
  s = ( v2 - v1 ) / vn;
 if( s ) {
  a = [ 'From ' + v1 + ' to ' + v2 + ' in ' + vn + ' step' + ( vn===1 ? '':'s' ) + ' of ' + s + ':\n' ];
  for( ; i<n; ) {
   a[++i] = Math.round( v1 * 1000 ) / 1000;
   v1 += s;
  }
  f.out.value = a.join( '\t' ) + '\n\n' + f.out.value;
 } else {
  window.alert( 'No step from ' + v1 + ' to ' + v2 + '!' );
 }
 return false;
}

gradient( document.forms.n2n );

Colour to colour

Blend any pair of colours, hexadecimally expressed, with this nifty scripty mixer tool.

Settings

Script

It should all speak for itself. If not, mouse over or doubleclick something.

function colourgradient( f ) {
 f = f.elements;
 var a = [],
  v1 = val2hex( f.v1 ),
  v2 = val2hex( f.v2 );
 if( ( v1+v2 ).length==12 ) {
  var vn = +f.steps.value || 1, i = vn + 1,
   r1 = hex2dec( v1.substring(0,2) ),
   g1 = hex2dec( v1.substring(2,4) ),
   b1 = hex2dec( v1.substring(4) ),
   rs = ( hex2dec( v2.substring(0,2) ) - r1 ) / vn,
   gs = ( hex2dec( v2.substring(2,4) ) - g1 ) / vn,
   bs = ( hex2dec( v2.substring(4) ) - b1 ) / vn;
  while(i--) {
   a[i] = '#' + dec2hex( r1 ) + dec2hex( g1 ) + dec2hex( b1 );
   r1 += rs;
   g1 += gs;
   b1 += bs;
  }
  buildtable( a );
 } else {
  a = v1.length==6 ? f.v2 : f.v1;
  window.alert( 'Sorry, "' + a.value + '" is not a color!' );
  a.select(); a.focus();
 }
 return false;
}

function dec2hex( s ) { return ( s<15.5 ? '0' : '' ) + Math.round( s ).toString( 16 ); }
function hex2dec( s ) { return parseInt( s, 16 ); }
function val2hex( s ) { return s.value.toLowerCase().replace( /[^\da-f]/g, '' ).replace( /^(\w)(\w)(\w)$/, '$1$1$2$2$3$3' ); }

//-- The rest is cosmetic

function buildtable( a ) {
 var i = a.length, j = i - 1, s, t,
  table = document.createElement( 'table' ),
  tbody = document.createElement( 'tbody' ),
  tr = document.createElement( 'tr' ),
  td = document.createElement( 'td' );
 td.insertBefore( document.createTextNode( ' ' ), null );
 tr.insertBefore( td.cloneNode( true ), null );
 td.className = 'c';
 tr.insertBefore( td, tr.firstChild );
 while(i--) {
  s = a[i];
  t = tr.cloneNode( true );
  t.title = ( j - i ) + ': ' + s;
  t.firstChild.style.backgroundColor = s;
  t.lastChild.firstChild.nodeValue = s.toUpperCase();
  t.onmouseover = liteup;
  t.onmouseout = lidown;
  tbody.insertBefore( t, null );
 }
 table.insertBefore( tbody, null );
 gid( 't' ).insertBefore( table, gid( 't' ).firstChild );
}

function liteup() { this.style.background = 'yellow'; }
function lidown() { this.style.background = ''; }

colourgradient( document.forms.c2c );