function odcien(hex, id)
{
  hex = hex.toUpperCase()
  var kolory = new Array();
  kolory = hex_dec(hex);
  if (kolory == -1) return;
  
  var r;
  var g;
  var b;
  var minus = new Array();
  var plus = new Array();
  
  r = kolory[0];
  g = kolory[1];
  b = kolory[2];
  do
  {
    r -= 51;
		g -= 51;
		b -= 51;
    if (r < 0) r = 0;
		if (g < 0) g = 0;
		if (b < 0) b = 0;
		minus[minus.length] = dec_hex(r, g, b);
  }
  while (r > 0 || g > 0 || b > 0);
  r = kolory[0];
  g = kolory[1];
  b = kolory[2];
  do
  {
    r += 51;
		g += 51;
		b += 51;
    if (r > 255) r = 255;
		if (g > 255) g = 255;
		if (b > 255) b = 255;
		plus[plus.length] = dec_hex(r, g, b);
  }
  while (r < 255 || g < 255 || b < 255);

  var html = '<span style="font-family: \'Courier New\', Courier, monospace; font-size: 10px; line-height: 20px">';
  var total = minus.length + plus.length;
  for (var i = minus.length-1, total_i = 0; i >= 0; i--, total_i++)
  {
    if (minus[i] != hex) html += '<span style="padding: 1px 5px;  border: 1px solid #000; background-color: ' + minus[i] + '; color: ' + (total_i < total/2 ? '#fff' : '#000') + '">' + minus[i] + '</span> ';
  }
  html += '<span style="padding: 1px 5px; border: 1px solid #f00; background-color: ' + hex + '; color: ' + (total_i < total/2 ? '#fff' : '#000') + '">' + hex + '</span> ';
  total_i++;
  for (i = 0; i < plus.length; i++, total_i++)
  {
    if (plus[i] != hex) html += '<span style="padding: 1px 5px; border: 1px solid #000; background-color: ' + plus[i] + '; color: ' + (total_i < total/2 ? '#fff' : '#000') + '">' + plus[i] + '</span> ';
  }
  html += '</span>';
  document.getElementById(id).innerHTML = html;
}

function hex_dec(RRGGBB)
{
  var str = RRGGBB + "";
  if (str.charAt(0) != "#" || str.length != 7) { alert("Nieprawidłowy format!"); return -1 }
  
  var kolory = new Array(0, 0, 0);
  var hex = new Array(str.charAt(2).toUpperCase() + str.charAt(1).toUpperCase(),
    str.charAt(4).toUpperCase() + str.charAt(3).toUpperCase(),
	str.charAt(6).toUpperCase() + str.charAt(5).toUpperCase());

  for (i = 0; i < hex.length; i++)
  {
    var l = 0;
		for (j = 0; j < 2; j++)
		{
			switch (hex[i].charAt(j))
			{
				case "0": l += 0; break;
				case "1": l += 1*(j*15 + 1); break;
				case "2": l += 2*(j*15 + 1); break;
				case "3": l += 3*(j*15 + 1); break;
				case "4": l += 4*(j*15 + 1); break;
				case "5": l += 5*(j*15 + 1); break;
				case "6": l += 6*(j*15 + 1); break;
				case "7": l += 7*(j*15 + 1); break;
				case "8": l += 8*(j*15 + 1); break;
				case "9": l += 9*(j*15 + 1); break;
				case "A": l += 10*(j*15 + 1); break;
				case "B": l += 11*(j*15 + 1); break;
				case "C": l += 12*(j*15 + 1); break;
				case "D": l += 13*(j*15 + 1); break;
				case "E": l += 14*(j*15 + 1); break;
				case "F": l += 15*(j*15 + 1); break;
				default: alert("Nieprawidłowy format!"); return -1;
			}
		}
		kolory[i] = l;
  }

  return kolory;
}

function dec_hex(r, g, b)
{ 
  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) { alert("Nieprawidłowy format!"); return -1 }
  var kolory = new Array(r, g, b);
  var hex = "#";
  for (i = 0; i < 3; i++)
  {
    var l = 0;
		switch (Math.floor(kolory[i]/16))
		{
			case 10: hex += "A"; break;
			case 11: hex += "B"; break;
			case 12: hex += "C"; break;
			case 13: hex += "D"; break;
			case 14: hex += "E"; break;
			case 15: hex += "F"; break;
			default: hex += Math.floor(kolory[i]/16); break;
		}
		switch (kolory[i]%16)
		{
			case 10: hex += "A"; break;
			case 11: hex += "B"; break;
			case 12: hex += "C"; break;
			case 13: hex += "D"; break;
			case 14: hex += "E"; break;
			case 15: hex += "F"; break;
			default: hex += kolory[i]%16; break;
		}
  }
  
  return hex;
}