RubyGems - cyberweb - Versions diffs - 0.12.35 - Mend

cyberweb 0.12.35

Files changed (1259) hide show

data/examples/html/colour_wheel.html ADDED Viewed

@@ -0,0 +1,1388 @@
+<html>
+<head>
+<title>The epic colour wheel</title>
+<link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/default.css"/ >
+<link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/links.css" />
+<link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/fonts.css" />
+<link rel="stylesheet" type="text/css" href="../../lib/cyberweb/cascading_style_sheets/colours.css" />
+<style>
+td {
+  padding: 4px;
+}
+</style>
+<script>
+/* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/
+(function () {
+function w3color(color, elmnt) {
+  if (!(this instanceof w3color)) { return new w3color(color, elmnt); }
+  if (typeof color == "object") {return color; }
+  this.attachValues(toColorObject(color));
+  if (elmnt) {elmnt.style.backgroundColor = this.toRgbString();}
+}
+w3color.prototype = {
+  toRgbString : function () {
+  return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
+  },
+  toRgbaString : function () {
+  return "rgba(" + this.red + ", " + this.green + ", " + this.blue + ", " + this.opacity + ")";
+  },
+  toHwbString : function () {
+  return "hwb(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%)";
+  },
+  toHwbStringDecimal : function () {
+  return "hwb(" + this.hue + ", " + this.whiteness + ", " + this.blackness + ")";
+  },
+  toHwbaString : function () {
+  return "hwba(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity + ")";
+  },
+  toHslString : function () {
+  return "hsl(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%)";
+  },
+  toHslStringDecimal : function () {
+  return "hsl(" + this.hue + ", " + this.sat + ", " + this.lightness + ")";
+  },
+  toHslaString : function () {
+  return "hsla(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%, " + this.opacity + ")";
+  },
+  toCmykString : function () {
+    return "cmyk(" + Math.round(this.cyan * 100) + "%, " + Math.round(this.magenta * 100) + "%, " + Math.round(this.yellow * 100) + "%, " + Math.round(this.black * 100) + "%)";
+  },
+  toCmykStringDecimal : function () {
+    return "cmyk(" + this.cyan + ", " + this.magenta + ", " + this.yellow + ", " + this.black + ")";
+  },
+  toNcolString : function () {
+  return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%";
+  },
+  toNcolStringDecimal : function () {
+  return this.ncol + ", " + this.whiteness + ", " + this.blackness;
+  },
+  toNcolaString : function () {
+  return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity;
+  },
+  toName : function () {
+  var r, g, b, colorhexs = getColorArr('hexs');
+  for (i = 0; i < colorhexs.length; i++) {
+    r = parseInt(colorhexs[i].substr(0,2), 16);
+    g = parseInt(colorhexs[i].substr(2,2), 16);
+    b = parseInt(colorhexs[i].substr(4,2), 16);
+    if (this.red == r && this.green == g && this.blue == b) {
+    return getColorArr('names')[i];
+    }
+  }
+  return "";
+  },
+  toHexString : function () {
+  var r = toHex(this.red);
+  var g = toHex(this.green);
+  var b = toHex(this.blue);
+  return "#" +  r + g + b;
+  },
+  toRgb : function () {
+  return {r : this.red, g : this.green, b : this.blue, a : this.opacity};
+  },
+  toHsl : function () {
+  return {h : this.hue, s : this.sat, l : this.lightness, a : this.opacity};
+  },
+  toHwb : function () {
+  return {h : this.hue, w : this.whiteness, b : this.blackness, a : this.opacity};
+  },
+  toCmyk : function () {
+  return {c : this.cyan, m : this.magenta, y : this.yellow, k : this.black, a : this.opacity};
+  },
+  toNcol : function () {
+  return {ncol : this.ncol, w : this.whiteness, b : this.blackness, a : this.opacity};
+  },
+  isDark : function (n) {
+  var m = (n || 128);
+  return (((this.red * 299 + this.green * 587 + this.blue * 114) / 1000) < m);
+  },
+  saturate : function (n) {
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.sat += x;
+  if (this.sat > 1) {this.sat = 1;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
+  },
+  desaturate : function (n) {
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.sat -= x;
+  if (this.sat < 0) {this.sat = 0;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
+  },
+  lighter : function (n) {
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.lightness += x;
+  if (this.lightness > 1) {this.lightness = 1;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
+  },
+  darker : function (n) {
+  var x, rgb, color;
+  x = (n / 100 || 0.1);
+  this.lightness -= x;
+  if (this.lightness < 0) {this.lightness = 0;}
+  rgb = hslToRgb(this.hue, this.sat, this.lightness);
+  color = colorObject(rgb, this.opacity, this.hue, this.sat);
+  this.attachValues(color);
+  },
+  attachValues : function(color) {
+  this.red = color.red;
+  this.green = color.green;
+  this.blue = color.blue;
+  this.hue = color.hue;
+  this.sat = color.sat;
+  this.lightness = color.lightness;
+  this.whiteness = color.whiteness;
+  this.blackness = color.blackness;
+  this.cyan = color.cyan;
+  this.magenta = color.magenta;
+  this.yellow = color.yellow;
+  this.black = color.black;
+  this.ncol = color.ncol;
+  this.opacity = color.opacity;
+  this.valid = color.valid;
+  }
+};
+function toColorObject(c) {
+  var x, y, typ, arr = [], arrlength, i, opacity, match, a, hue, sat, rgb, colornames = [], colorhexs = [];
+  c = w3trim(c.toLowerCase());
+  x = c.substr(0,1).toUpperCase();
+  y = c.substr(1);
+  a = 1;
+  if ((x == "R" || x == "Y" || x == "G" || x == "C" || x == "B" || x == "M" || x == "W") && !isNaN(y)) {
+  if (c.length == 6 && c.indexOf(",") == -1) {
+  } else {
+    c = "ncol(" + c + ")";
+  }
+  }
+  if (c.length != 3 && c.length != 6 && !isNaN(c)) {c = "ncol(" + c + ")";}
+  if (c.indexOf(",") > 0 && c.indexOf("(") == -1) {c = "ncol(" + c + ")";}
+  if (c.substr(0, 3) == "rgb" || c.substr(0, 3) == "hsl" || c.substr(0, 3) == "hwb" || c.substr(0, 4) == "ncol" || c.substr(0, 4) == "cmyk") {
+  if (c.substr(0, 4) == "ncol") {
+    if (c.split(",").length == 4 && c.indexOf("ncola") == -1) {
+    c = c.replace("ncol", "ncola");
+    }
+    typ = "ncol";
+    c = c.substr(4);
+  } else if (c.substr(0, 4) == "cmyk") {
+    typ = "cmyk";
+    c = c.substr(4);
+  } else {
+    typ = c.substr(0, 3);
+    c = c.substr(3);
+  }
+  arrlength = 3;
+  opacity = false;
+  if (c.substr(0, 1).toLowerCase() == "a") {
+    arrlength = 4;
+    opacity = true;
+    c = c.substr(1);
+  } else if (typ == "cmyk") {
+    arrlength = 4;
+    if (c.split(",").length == 5) {
+    arrlength = 5;
+    opacity = true;
+    }
+  }
+  c = c.replace("(", "");
+  c = c.replace(")", "");
+  arr = c.split(",");
+  if (typ == "rgb") {
+    if (arr.length != arrlength) {
+    return emptyObject();
+    }
+    for (i = 0; i < arrlength; i++) {
+    if (arr[i] == "" || arr[i] == " ") {arr[i] = "0"; }
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i] / 100);
+      if (i < 3 ) {arr[i] = Math.round(arr[i] * 255);}
+    }
+    if (isNaN(arr[i])) {return emptyObject(); }
+    if (parseInt(arr[i]) > 255) {arr[i] = 255; }
+    if (i < 3) {arr[i] = parseInt(arr[i]);}
+    if (i == 3 && Number(arr[i]) > 1) {arr[i] = 1;}
+    }
+    rgb = {r : arr[0], g : arr[1], b : arr[2]};
+    if (opacity == true) {a = Number(arr[3]);}
+  }
+  if (typ == "hsl" || typ == "hwb" || typ == "ncol") {
+    while (arr.length < arrlength) {arr.push("0"); }
+    if (typ == "hsl" || typ == "hwb") {
+    if (parseInt(arr[0]) >= 360) {arr[0] = 0; }
+    }
+    for (i = 1; i < arrlength; i++) {
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i]);
+      if (isNaN(arr[i])) {return emptyObject(); }
+      arr[i] = arr[i] / 100;
+    } else {
+      arr[i] = Number(arr[i]);
+    }
+    if (Number(arr[i]) > 1) {arr[i] = 1;}
+    if (Number(arr[i]) < 0) {arr[i] = 0;}
+    }
+    if (typ == "hsl") {rgb = hslToRgb(arr[0], arr[1], arr[2]); hue = Number(arr[0]); sat = Number(arr[1]);}
+    if (typ == "hwb") {rgb = hwbToRgb(arr[0], arr[1], arr[2]);}
+    if (typ == "ncol") {rgb = ncolToRgb(arr[0], arr[1], arr[2]);}
+    if (opacity == true) {a = Number(arr[3]);}
+  }
+  if (typ == "cmyk") {
+    while (arr.length < arrlength) {arr.push("0"); }
+    for (i = 0; i < arrlength; i++) {
+    if (arr[i].indexOf("%") > -1) {
+      arr[i] = arr[i].replace("%", "");
+      arr[i] = Number(arr[i]);
+      if (isNaN(arr[i])) {return emptyObject(); }
+      arr[i] = arr[i] / 100;
+    } else {
+      arr[i] = Number(arr[i]);
+    }
+    if (Number(arr[i]) > 1) {arr[i] = 1;}
+    if (Number(arr[i]) < 0) {arr[i] = 0;}
+    }
+    rgb = cmykToRgb(arr[0], arr[1], arr[2], arr[3]);
+    if (opacity == true) {a = Number(arr[4]);}
+  }
+  } else if (c.substr(0, 3) == "ncs") {
+  rgb = ncsToRgb(c);
+  } else {
+  match = false;
+  colornames = getColorArr('names');
+  for (i = 0; i < colornames.length; i++) {
+    if (c.toLowerCase() == colornames[i].toLowerCase()) {
+    colorhexs = getColorArr('hexs');
+    match = true;
+    rgb = {
+      r : parseInt(colorhexs[i].substr(0,2), 16),
+      g : parseInt(colorhexs[i].substr(2,2), 16),
+      b : parseInt(colorhexs[i].substr(4,2), 16)
+    };
+    break;
+    }
+  }
+  if (match == false) {
+    c = c.replace("#", "");
+    if (c.length == 3) {c = c.substr(0,1) + c.substr(0,1) + c.substr(1,1) + c.substr(1,1) + c.substr(2,1) + c.substr(2,1);}
+    for (i = 0; i < c.length; i++) {
+    if (!isHex(c.substr(i, 1))) {return emptyObject(); }
+    }
+    arr[0] = parseInt(c.substr(0,2), 16);
+    arr[1] = parseInt(c.substr(2,2), 16);
+    arr[2] = parseInt(c.substr(4,2), 16);
+    for (i = 0; i < 3; i++) {
+    if (isNaN(arr[i])) {return emptyObject(); }
+    }
+    rgb = {
+    r : arr[0],
+    g : arr[1],
+    b : arr[2]
+    };
+  }
+  }
+  return colorObject(rgb, a, hue, sat);
+}
+function colorObject(rgb, a, h, s) {
+  var hsl, hwb, cmyk, ncol, color, hue, sat;
+  if (!rgb) {return emptyObject();}
+  if (a === null) {a = 1;}
+  hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  hwb = rgbToHwb(rgb.r, rgb.g, rgb.b);
+  cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);
+  hue = (h || hsl.h);
+  sat = (s || hsl.s);
+  ncol = hueToNcol(hue);
+  color = {
+  red : rgb.r,
+  green : rgb.g,
+  blue : rgb.b,
+  hue : hue,
+  sat : sat,
+  lightness : hsl.l,
+  whiteness : hwb.w,
+  blackness : hwb.b,
+  cyan : cmyk.c,
+  magenta : cmyk.m,
+  yellow : cmyk.y,
+  black : cmyk.k,
+  ncol : ncol,
+  opacity : a,
+  valid : true
+  };
+  color = roundDecimals(color);
+  return color;
+}
+function emptyObject() {
+  return {
+  red : 0,
+  green : 0,
+  blue : 0,
+  hue : 0,
+  sat : 0,
+  lightness : 0,
+  whiteness : 0,
+  blackness : 0,
+  cyan : 0,
+  magenta : 0,
+  yellow : 0,
+  black : 0,
+  ncol : "R",
+  opacity : 1,
+  valid : false
+  };
+}
+function getColorArr(x) {
+  if (x == "names") {return ['AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmond','Blue','BlueViolet','Brown','BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray','DarkGrey','DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','DarkOrange','DarkOrchid','DarkRed','DarkSalmon','DarkSeaGreen','DarkSlateBlue','DarkSlateGray','DarkSlateGrey','DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DimGrey','DodgerBlue','FireBrick','FloralWhite','ForestGreen','Fuchsia','Gainsboro','GhostWhite','Gold','GoldenRod','Gray','Grey','Green','GreenYellow','HoneyDew','HotPink','IndianRed','Indigo','Ivory','Khaki','Lavender','LavenderBlush','LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGray','LightGrey','LightGreen','LightPink','LightSalmon','LightSeaGreen','LightSkyBlue','LightSlateGray','LightSlateGrey','LightSteelBlue','LightYellow','Lime','LimeGreen','Linen','Magenta','Maroon','MediumAquaMarine','MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','MediumTurquoise','MediumVioletRed','MidnightBlue','MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','OrangeRed','Orchid','PaleGoldenRod','PaleGreen','PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple','RebeccaPurple','Red','RosyBrown','RoyalBlue','SaddleBrown','Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','SlateGrey','Snow','SpringGreen','SteelBlue','Tan','Teal','Thistle','Tomato','Turquoise','Violet','Wheat','White','WhiteSmoke','Yellow','YellowGreen']; }
+  if (x == "hexs") {return ['f0f8ff','faebd7','00ffff','7fffd4','f0ffff','f5f5dc','ffe4c4','000000','ffebcd','0000ff','8a2be2','a52a2a','deb887','5f9ea0','7fff00','d2691e','ff7f50','6495ed','fff8dc','dc143c','00ffff','00008b','008b8b','b8860b','a9a9a9','a9a9a9','006400','bdb76b','8b008b','556b2f','ff8c00','9932cc','8b0000','e9967a','8fbc8f','483d8b','2f4f4f','2f4f4f','00ced1','9400d3','ff1493','00bfff','696969','696969','1e90ff','b22222','fffaf0','228b22','ff00ff','dcdcdc','f8f8ff','ffd700','daa520','808080','808080','008000','adff2f','f0fff0','ff69b4','cd5c5c','4b0082','fffff0','f0e68c','e6e6fa','fff0f5','7cfc00','fffacd','add8e6','f08080','e0ffff','fafad2','d3d3d3','d3d3d3','90ee90','ffb6c1','ffa07a','20b2aa','87cefa','778899','778899','b0c4de','ffffe0','00ff00','32cd32','faf0e6','ff00ff','800000','66cdaa','0000cd','ba55d3','9370db','3cb371','7b68ee','00fa9a','48d1cc','c71585','191970','f5fffa','ffe4e1','ffe4b5','ffdead','000080','fdf5e6','808000','6b8e23','ffa500','ff4500','da70d6','eee8aa','98fb98','afeeee','db7093','ffefd5','ffdab9','cd853f','ffc0cb','dda0dd','b0e0e6','800080','663399','ff0000','bc8f8f','4169e1','8b4513','fa8072','f4a460','2e8b57','fff5ee','a0522d','c0c0c0','87ceeb','6a5acd','708090','708090','fffafa','00ff7f','4682b4','d2b48c','008080','d8bfd8','ff6347','40e0d0','ee82ee','f5deb3','ffffff','f5f5f5','ffff00','9acd32']; }
+}
+function roundDecimals(c) {
+  c.red = Number(c.red.toFixed(0));
+  c.green = Number(c.green.toFixed(0));
+  c.blue = Number(c.blue.toFixed(0));
+  c.hue = Number(c.hue.toFixed(0));
+  c.sat = Number(c.sat.toFixed(2));
+  c.lightness = Number(c.lightness.toFixed(2));
+  c.whiteness = Number(c.whiteness.toFixed(2));
+  c.blackness = Number(c.blackness.toFixed(2));
+  c.cyan = Number(c.cyan.toFixed(2));
+  c.magenta = Number(c.magenta.toFixed(2));
+  c.yellow = Number(c.yellow.toFixed(2));
+  c.black = Number(c.black.toFixed(2));
+  c.ncol = c.ncol.substr(0, 1) + Math.round(Number(c.ncol.substr(1)));
+  c.opacity = Number(c.opacity.toFixed(2));
+  return c;
+}
+function hslToRgb(hue, sat, light) {
+  var t1, t2, r, g, b;
+  hue = hue / 60;
+  if ( light <= 0.5 ) {
+  t2 = light * (sat + 1);
+  } else {
+  t2 = light + sat - (light * sat);
+  }
+  t1 = light * 2 - t2;
+  r = hueToRgb(t1, t2, hue + 2) * 255;
+  g = hueToRgb(t1, t2, hue) * 255;
+  b = hueToRgb(t1, t2, hue - 2) * 255;
+  return {r : r, g : g, b : b};
+}
+function hueToRgb(t1, t2, hue) {
+  if (hue < 0) hue += 6;
+  if (hue >= 6) hue -= 6;
+  if (hue < 1) return (t2 - t1) * hue + t1;
+  else if(hue < 3) return t2;
+  else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
+  else return t1;
+}
+function hwbToRgb(hue, white, black) {
+  var i, rgb, rgbArr = [], tot;
+  rgb = hslToRgb(hue, 1, 0.50);
+  rgbArr[0] = rgb.r / 255;
+  rgbArr[1] = rgb.g / 255;
+  rgbArr[2] = rgb.b / 255;
+  tot = white + black;
+  if (tot > 1) {
+  white = Number((white / tot).toFixed(2));
+  black = Number((black / tot).toFixed(2));
+  }
+  for (i = 0; i < 3; i++) {
+  rgbArr[i] *= (1 - (white) - (black));
+  rgbArr[i] += (white);
+  rgbArr[i] = Number(rgbArr[i] * 255);
+  }
+  return {r : rgbArr[0], g : rgbArr[1], b : rgbArr[2] };
+}
+function cmykToRgb(c, m, y, k) {
+  var r, g, b;
+  r = 255 - ((Math.min(1, c * (1 - k) + k)) * 255);
+  g = 255 - ((Math.min(1, m * (1 - k) + k)) * 255);
+  b = 255 - ((Math.min(1, y * (1 - k) + k)) * 255);
+  return {r : r, g : g, b : b};
+}
+function ncolToRgb(ncol, white, black) {
+  var letter, percent, h, w, b;
+  h = ncol;
+  if (isNaN(ncol.substr(0,1))) {
+  letter = ncol.substr(0,1).toUpperCase();
+  percent = ncol.substr(1);
+  if (percent == "") {percent = 0;}
+  percent = Number(percent);
+  if (isNaN(percent)) {return false;}
+  if (letter == "R") {h = 0 + (percent * 0.6);}
+  if (letter == "Y") {h = 60 + (percent * 0.6);}
+  if (letter == "G") {h = 120 + (percent * 0.6);}
+  if (letter == "C") {h = 180 + (percent * 0.6);}
+  if (letter == "B") {h = 240 + (percent * 0.6);}
+  if (letter == "M") {h = 300 + (percent * 0.6);}
+  if (letter == "W") {
+    h = 0;
+    white = 1 - (percent / 100);
+    black = (percent / 100);
+  }
+  }
+  return hwbToRgb(h, white, black);
+}
+function hueToNcol(hue) {
+  while (hue >= 360) {
+  hue = hue - 360;
+  }
+  if (hue < 60) {return "R" + (hue / 0.6); }
+  if (hue < 120) {return "Y" + ((hue - 60) / 0.6); }
+  if (hue < 180) {return "G" + ((hue - 120) / 0.6); }
+  if (hue < 240) {return "C" + ((hue - 180) / 0.6); }
+  if (hue < 300) {return "B" + ((hue - 240) / 0.6); }
+  if (hue < 360) {return "M" + ((hue - 300) / 0.6); }
+}
+function ncsToRgb(ncs){
+  var black, chroma, bc, percent, black1, chroma1, red1, factor1, blue1, red1, red2, green2, blue2, max, factor2, grey, r, g, b;
+  ncs = w3trim(ncs).toUpperCase();
+  ncs = ncs.replace("(", "");
+  ncs = ncs.replace(")", "");
+  ncs = ncs.replace("NCS", "NCS ");
+  ncs = ncs.replace(/  /g, " ");
+  if (ncs.indexOf("NCS") == -1) {ncs = "NCS " + ncs;}
+  ncs = ncs.match(/^(?:NCS|NCS\sS)\s(\d{2})(\d{2})-(N|[A-Z])(\d{2})?([A-Z])?$/);
+  if (ncs === null) return false;
+  black = parseInt(ncs[1], 10);
+  chroma = parseInt(ncs[2], 10);
+  bc = ncs[3];
+  if (bc != "N" && bc != "Y" && bc != "R" && bc != "B" && bc != "G") {return false;}
+  percent = parseInt(ncs[4], 10) || 0;
+  if (bc !== 'N') {
+  black1 = (1.05 * black - 5.25);
+  chroma1 = chroma;
+  if (bc === 'Y' && percent <= 60) {
+    red1 = 1;
+  } else if (( bc === 'Y' && percent > 60) || ( bc === 'R' && percent <= 80)) {
+    if (bc === 'Y') {
+    factor1 = percent - 60;
+    } else {
+    factor1 = percent + 40;
+    }
+    red1 = ((Math.sqrt(14884 - Math.pow(factor1, 2))) - 22) / 100;
+  } else if ((bc === 'R' && percent > 80) || (bc === 'B')) {
+    red1 = 0;
+  } else if (bc === 'G') {
+    factor1 = (percent - 170);
+    red1 = ((Math.sqrt(33800 - Math.pow(factor1, 2))) - 70) / 100;
+  }
+  if (bc === 'Y' && percent <= 80) {
+    blue1 = 0;
+  } else if (( bc === 'Y' && percent > 80) || ( bc === 'R' && percent <= 60)) {
+    if (bc ==='Y') {
+    factor1 = (percent - 80) + 20.5;
+    } else {
+    factor1 = (percent + 20) + 20.5;
+    }
+    blue1 = (104 - (Math.sqrt(11236 - Math.pow(factor1, 2)))) / 100;
+  } else if ((bc === 'R' && percent > 60) || ( bc === 'B' && percent <= 80)) {
+    if (bc ==='R') {
+    factor1 = (percent - 60) - 60;
+    } else {
+    factor1 = (percent + 40) - 60;
+    }
+    blue1 = ((Math.sqrt(10000 - Math.pow(factor1, 2))) - 10) / 100;
+  } else if (( bc === 'B' && percent > 80) || ( bc === 'G' && percent <= 40)) {
+    if (bc === 'B') {
+    factor1 = (percent - 80) - 131;
+    } else {
+    factor1 = (percent + 20) - 131;
+    }
+    blue1 = (122 - (Math.sqrt(19881 - Math.pow(factor1, 2)))) / 100;
+  } else if (bc === 'G' && percent > 40) {
+    blue1 = 0;
+  }
+  if (bc === 'Y') {
+    green1 = (85 - 17/20 * percent) / 100;
+  } else if (bc === 'R' && percent <= 60) {
+    green1 = 0;
+  } else if (bc === 'R' && percent > 60) {
+    factor1 = (percent - 60) + 35;
+    green1 = (67.5 - (Math.sqrt(5776 - Math.pow(factor1, 2)))) / 100;
+  } else if (bc === 'B' && percent <= 60) {
+    factor1 = (1*percent - 68.5);
+    green1 = (6.5 + (Math.sqrt(7044.5 - Math.pow(factor1, 2)))) / 100;
+  } else if ((bc === 'B' && percent > 60) || ( bc === 'G' && percent <= 60)) {
+    green1 = 0.9;
+  } else if (bc === 'G' && percent > 60) {
+    factor1 = (percent - 60);
+    green1 = (90 - (1/8 * factor1)) / 100;
+  }
+  factor1 = (red1 + green1 + blue1)/3;
+  red2 = ((factor1 - red1) * (100 - chroma1) / 100) + red1;
+  green2 = ((factor1 - green1) * (100 - chroma1) / 100) + green1;
+  blue2 = ((factor1 - blue1) * (100 - chroma1) / 100) + blue1;
+  if (red2 > green2 && red2 > blue2) {
+    max = red2;
+  } else if (green2 > red2 && green2 > blue2) {
+    max = green2;
+  } else if (blue2 > red2 && blue2 > green2) {
+    max = blue2;
+  } else {
+    max = (red2 + green2 + blue2) / 3;
+  }
+  factor2 = 1 / max;
+  r = parseInt((red2 * factor2 * (100 - black1) / 100) * 255, 10);
+  g = parseInt((green2 * factor2 * (100 - black1) / 100) * 255, 10);
+  b = parseInt((blue2 * factor2 * (100 - black1) / 100) * 255, 10);
+  if (r > 255) {r = 255;}
+  if (g > 255) {g = 255;}
+  if (b > 255) {b = 255;}
+  if (r < 0) {r = 0;}
+  if (g < 0) {g = 0;}
+  if (b < 0) {b = 0;}
+  } else {
+  grey = parseInt((1 - black / 100) * 255, 10);
+  if (grey > 255) {grey = 255;}
+  if (grey < 0) {grey = 0;}
+  r = grey;
+  g = grey;
+  b = grey;
+  }
+  return {
+  r : r,
+  g : g,
+  b : b
+  };
+}
+function rgbToHsl(r, g, b) {
+  var min, max, i, l, s, maxcolor, h, rgb = [];
+  rgb[0] = r / 255;
+  rgb[1] = g / 255;
+  rgb[2] = b / 255;
+  min = rgb[0];
+  max = rgb[0];
+  maxcolor = 0;
+  for (i = 0; i < rgb.length - 1; i++) {
+  if (rgb[i + 1] <= min) {min = rgb[i + 1];}
+  if (rgb[i + 1] >= max) {max = rgb[i + 1];maxcolor = i + 1;}
+  }
+  if (maxcolor == 0) {
+  h = (rgb[1] - rgb[2]) / (max - min);
+  }
+  if (maxcolor == 1) {
+  h = 2 + (rgb[2] - rgb[0]) / (max - min);
+  }
+  if (maxcolor == 2) {
+  h = 4 + (rgb[0] - rgb[1]) / (max - min);
+  }
+  if (isNaN(h)) {h = 0;}
+  h = h * 60;
+  if (h < 0) {h = h + 360; }
+  l = (min + max) / 2;
+  if (min == max) {
+  s = 0;
+  } else {
+  if (l < 0.5) {
+    s = (max - min) / (max + min);
+  } else {
+    s = (max - min) / (2 - max - min);
+  }
+  }
+  s = s;
+  return {h : h, s : s, l : l};
+}
+function rgbToHwb(r, g, b) {
+  var h, w, bl;
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+  max = Math.max(r, g, b);
+  min = Math.min(r, g, b);
+  chroma = max - min;
+  if (chroma == 0) {
+  h = 0;
+  } else if (r == max) {
+  h = (((g - b) / chroma) % 6) * 360;
+  } else if (g == max) {
+  h = ((((b - r) / chroma) + 2) % 6) * 360;
+  } else {
+  h = ((((r - g) / chroma) + 4) % 6) * 360;
+  }
+  w = min;
+  bl = 1 - max;
+  return {h : h, w : w, b : bl};
+}
+function rgbToCmyk(r, g, b) {
+  var c, m, y, k;
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+  max = Math.max(r, g, b);
+  k = 1 - max;
+  if (k == 1) {
+  c = 0;
+  m = 0;
+  y = 0;
+  } else {
+  c = (1 - r - k) / (1 - k);
+  m = (1 - g - k) / (1 - k);
+  y = (1 - b - k) / (1 - k);
+  }
+  return {c : c, m : m, y : y, k : k};
+}
+function toHex(n) {
+  var hex = n.toString(16);
+  while (hex.length < 2) {hex = "0" + hex; }
+  return hex;
+}
+function cl(x) {
+  console.log(x);
+}
+function w3trim(x) {
+  return x.replace(/^\s+|\s+$/g, '');
+}
+function isHex(x) {
+  return ('0123456789ABCDEFabcdef'.indexOf(x) > -1);
+}
+window.w3color = w3color;
+})();
+function w3SetColorsByAttribute() {
+  var z, i, att;
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+  att = z[i].getAttribute("data-w3-color");
+  if (att) {
+    z[i].style.backgroundColor = w3color(att).toRgbString();
+  }
+  }
+}
+</script>
+</head>
+<body style="margin: 0px; paddding: 0px">
+<div class="BG_Black" style="background-color:black; padding:0.5em;">
+<table class="pad1em" style="border:1px solid grey; padding: 0.8em;">
+<tr><td>
+<span style="color:#F0F8FF">
+aliceblue - color: #F0F8FF
+</span>
+</td><td>
+<span style="color:#FAEBD7">
+antiquewhite - color: #FAEBD7
+</span>
+</td><td>
+<span style="color:#7FFFD4">
+aquamarine - color: #7FFFD4
+</span>
+</td><td>
+<span style="color:#F0FFFF">
+azure - color: #F0FFFF
+</span>
+</td></tr><tr><td>
+<span style="color:#F5F5DC">
+beige - color: #F5F5DC
+</span>
+</td><td>
+<span style="color:#FFE4C4">
+bisque - color: #FFE4C4
+</span>
+</td><td>
+<span style="color:#000000">
+black - color: #000000
+</span>
+</td><td>
+<span style="color:#FFEBCD">
+blanchedalmond - color: #FFEBCD
+</span>
+</td></tr><tr><td>
+<span style="color:#0000FF">
+blue - color: #0000FF
+</span>
+</td><td>
+<span style="color:#8A2BE2">
+blueviolet - color: #8A2BE2
+</span>
+</td><td>
+<span style="color:#A52A2A">
+brown - color: #A52A2A
+</span>
+</td><td>
+<span style="color:#DEB887">
+burlywood - color: #DEB887
+</span>
+</td></tr><tr><td>
+<span style="color:#5F9EA0">
+cadetblue - color: #5F9EA0
+</span>
+</td><td>
+<span style="color:#7FFF00">
+chartreuse - color: #7FFF00
+</span>
+</td><td>
+<span style="color:#D2691E">
+chocolate - color: #D2691E
+</span>
+</td><td>
+<span style="color:#FF7F50">
+coral - color: #FF7F50
+</span>
+</td></tr><tr><td>
+<span style="color:#6495ED">
+cornflowerblue - color: #6495ED
+</span>
+</td><td>
+<span style="color:#FFF8DC">
+cornsilk - color: #FFF8DC
+</span>
+</td><td>
+<span style="color:#DC143C">
+crimson - color: #DC143C
+</span>
+</td><td>
+<span style="color:#00FFFF">
+cyan - color: #00FFFF
+</span>
+</td></tr><tr><td>
+<span style="color:#00008B">
+darkblue - color: #00008B
+</span>
+</td><td>
+<span style="color:#008B8B">
+darkcyan - color: #008B8B
+</span>
+</td><td>
+<span style="color:#B8860B">
+darkgoldenrod - color: #B8860B
+</span>
+</td><td>
+<span style="color:#A9A9A9">
+darkgray - color: #A9A9A9
+</span>
+</td></tr><tr><td>
+<span style="color:#006400">
+darkgreen - color: #006400
+</span>
+</td><td>
+<span style="color:#BDB76B">
+darkkhaki - color: #BDB76B
+</span>
+</td><td>
+<span style="color:#8B008B">
+darkmagenta - color: #8B008B
+</span>
+</td><td>
+<span style="color:#556B2F">
+darkolivegreen - color: #556B2F
+</span>
+</td></tr><tr><td>
+<span style="color:#FF8C00">
+darkorange - color: #FF8C00
+</span>
+</td><td>
+<span style="color:#9932CC">
+darkorchid - color: #9932CC
+</span>
+</td><td>
+<span style="color:#8B0000">
+darkred - color: #8B0000
+</span>
+</td><td>
+<span style="color:#E9967A">
+darksalmon - color: #E9967A
+</span>
+</td></tr><tr><td>
+<span style="color:#8FBC8F">
+darkseagreen - color: #8FBC8F
+</span>
+</td><td>
+<span style="color:#483D8B">
+darkslateblue - color: #483D8B
+</span>
+</td><td>
+<span style="color:#2F4F4F">
+darkslategray - color: #2F4F4F
+</span>
+</td><td>
+<span style="color:#00CED1">
+darkturquoise - color: #00CED1
+</span>
+</td></tr><tr><td>
+<span style="color:#9400D3">
+darkviolet - color: #9400D3
+</span>
+</td><td>
+<span style="color:#FF1493">
+deeppink - color: #FF1493
+</span>
+</td><td>
+<span style="color:#00BFFF">
+deepskyblue - color: #00BFFF
+</span>
+</td><td>
+<span style="color:#696969">
+dimgray - color: #696969
+</span>
+</td></tr><tr><td>
+<span style="color:#1E90FF">
+dodgerblue - color: #1E90FF
+</span>
+</td><td>
+<span style="color:#B22222">
+firebrick - color: #B22222
+</span>
+</td><td>
+<span style="color:#FFFAF0">
+floralwhite - color: #FFFAF0
+</span>
+</td><td>
+<span style="color:#228B22">
+forestgreen - color: #228B22
+</span>
+</td></tr><tr><td>
+<span style="color:#DCDCDC">
+gainsboro - color: #DCDCDC
+</span>
+</td><td>
+<span style="color:#F8F8FF">
+ghostwhite - color: #F8F8FF
+</span>
+</td><td>
+<span style="color:#FFD700">
+gold - color: #FFD700
+</span>
+</td><td>
+<span style="color:#DAA520">
+goldenrod - color: #DAA520
+</span>
+</td></tr><tr><td>
+<span style="color:#008000">
+green - color: #008000
+</span>
+</td><td>
+<span style="color:#ADFF2F">
+greenyellow - color: #ADFF2F
+</span>
+</td><td>
+<span style="color:#808080">
+grey - color: #808080
+</span>
+</td><td>
+<span style="color:#F0FFF0">
+honeydew - color: #F0FFF0
+</span>
+</td></tr><tr><td>
+<span style="color:#FF69B4">
+hotpink - color: #FF69B4
+</span>
+</td><td>
+<span style="color:#CD5C5C">
+indianred - color: #CD5C5C
+</span>
+</td><td>
+<span style="color:#4B0082">
+indigo - color: #4B0082
+</span>
+</td><td>
+<span style="color:#FFFFF0">
+ivory - color: #FFFFF0
+</span>
+</td></tr><tr><td>
+<span style="color:#F0E68C">
+khaki - color: #F0E68C
+</span>
+</td><td>
+<span style="color:#E6E6FA">
+lavender - color: #E6E6FA
+</span>
+</td><td>
+<span style="color:#FFF0F5">
+lavenderblush - color: #FFF0F5
+</span>
+</td><td>
+<span style="color:#7CFC00">
+lawngreen - color: #7CFC00
+</span>
+</td></tr><tr><td>
+<span style="color:#FFFACD">
+lemonchiffon - color: #FFFACD
+</span>
+</td><td>
+<span style="color:#ADD8E6">
+lightblue - color: #ADD8E6
+</span>
+</td><td>
+<span style="color:#F08080">
+lightcoral - color: #F08080
+</span>
+</td><td>
+<span style="color:#E0FFFF">
+lightcyan - color: #E0FFFF
+</span>
+</td></tr><tr><td>
+<span style="color:#FAFAD2">
+lightgoldenrodyellow - color: #FAFAD2
+</span>
+</td><td>
+<span style="color:#90EE90">
+lightgreen - color: #90EE90
+</span>
+</td><td>
+<span style="color:#D3D3D3">
+lightgrey - color: #D3D3D3
+</span>
+</td><td>
+<span style="color:#FFB6C1">
+lightpink - color: #FFB6C1
+</span>
+</td></tr><tr><td>
+<span style="color:#FFA07A">
+lightsalmon - color: #FFA07A
+</span>
+</td><td>
+<span style="color:#20B2AA">
+lightseagreen - color: #20B2AA
+</span>
+</td><td>
+<span style="color:#87CEFA">
+lightskyblue - color: #87CEFA
+</span>
+</td><td>
+<span style="color:#778899">
+lightslategray - color: #778899
+</span>
+</td></tr><tr><td>
+<span style="color:#B0C4DE">
+lightsteelblue - color: #B0C4DE
+</span>
+</td><td>
+<span style="color:#FFFFE0">
+lightyellow - color: #FFFFE0
+</span>
+</td><td>
+<span style="color:#00FF00">
+lime - color: #00FF00
+</span>
+</td><td>
+<span style="color:#32CD32">
+limegreen - color: #32CD32
+</span>
+</td></tr><tr><td>
+<span style="color:#FAF0E6">
+linen - color: #FAF0E6
+</span>
+</td><td>
+<span style="color:#FF00FF">
+magenta - color: #FF00FF
+</span>
+</td><td>
+<span style="color:#800000">
+maroon - color: #800000
+</span>
+</td><td>
+<span style="color:#66CDAA">
+mediumaquamarine - color: #66CDAA
+</span>
+</td></tr><tr><td>
+<span style="color:#0000CD">
+mediumblue - color: #0000CD
+</span>
+</td><td>
+<span style="color:#9370DB">
+mediumpurple - color: #9370DB
+</span>
+</td><td>
+<span style="color:#3CB371">
+mediumseagreen - color: #3CB371
+</span>
+</td><td>
+<span style="color:#7B68EE">
+mediumslateblue - color: #7B68EE
+</span>
+</td></tr><tr><td>
+<span style="color:#00FA9A">
+mediumspringgreen - color: #00FA9A
+</span>
+</td><td>
+<span style="color:#48D1CC">
+mediumturquoise - color: #48D1CC
+</span>
+</td><td>
+<span style="color:#C71585">
+mediumvioletred - color: #C71585
+</span>
+</td><td>
+<span style="color:#191970">
+midnightblue - color: #191970
+</span>
+</td></tr><tr><td>
+<span style="color:#F5FFFA">
+mintcream - color: #F5FFFA
+</span>
+</td><td>
+<span style="color:#FFE4E1">
+mistyrose - color: #FFE4E1
+</span>
+</td><td>
+<span style="color:#FFE4B5">
+moccasin - color: #FFE4B5
+</span>
+</td><td>
+<span style="color:#FFDEAD">
+navajowhite - color: #FFDEAD
+</span>
+</td></tr><tr><td>
+<span style="color:#000080">
+navy - color: #000080
+</span>
+</td><td>
+<span style="color:#FDF5E6">
+oldlace - color: #FDF5E6
+</span>
+</td><td>
+<span style="color:#808000">
+olive - color: #808000
+</span>
+</td><td>
+<span style="color:#6B8E23">
+olivedrab - color: #6B8E23
+</span>
+</td></tr><tr><td>
+<span style="color:#FFA500">
+orange - color: #FFA500
+</span>
+</td><td>
+<span style="color:#FF4500">
+orangered - color: #FF4500
+</span>
+</td><td>
+<span style="color:#DA70D6">
+orchid - color: #DA70D6
+</span>
+</td><td>
+<span style="color:#EEE8AA">
+palegoldenrod - color: #EEE8AA
+</span>
+</td></tr><tr><td>
+<span style="color:#98FB98">
+palegreen - color: #98FB98
+</span>
+</td><td>
+<span style="color:#AFEEEE">
+paleturquoise - color: #AFEEEE
+</span>
+</td><td>
+<span style="color:#DB7093">
+palevioletred - color: #DB7093
+</span>
+</td><td>
+<span style="color:#FFEFD5">
+papayawhip - color: #FFEFD5
+</span>
+</td></tr><tr><td>
+<span style="color:#FFDAB9">
+peachpuff - color: #FFDAB9
+</span>
+</td><td>
+<span style="color:#CD853F">
+peru - color: #CD853F
+</span>
+</td><td>
+<span style="color:#FFC0CB">
+pink - color: #FFC0CB
+</span>
+</td><td>
+<span style="color:#DDA0DD">
+plum - color: #DDA0DD
+</span>
+</td></tr><tr><td>
+<span style="color:#B0E0E6">
+powderblue - color: #B0E0E6
+</span>
+</td><td>
+<span style="color:#800080">
+purple - color: #800080
+</span>
+</td><td>
+<span style="color:#FF0000">
+red - color: #FF0000
+</span>
+</td><td>
+<span style="color:#BC8F8F">
+rosybrown - color: #BC8F8F
+</span>
+</td></tr><tr><td>
+<span style="color:#4169E1">
+royalblue - color: #4169E1
+</span>
+</td><td>
+<span style="color:#8B4513">
+saddlebrown - color: #8B4513
+</span>
+</td><td>
+<span style="color:#FA8072">
+salmon - color: #FA8072
+</span>
+</td><td>
+<span style="color:#F4A460">
+sandybrown - color: #F4A460
+</span>
+</td></tr><tr><td>
+<span style="color:#2E8B57">
+seagreen - color: #2E8B57
+</span>
+</td><td>
+<span style="color:#FFF5EE">
+seashell - color: #FFF5EE
+</span>
+</td><td>
+<span style="color:#A0522D">
+sienna - color: #A0522D
+</span>
+</td><td>
+<span style="color:#C0C0C0">
+silver  - color: #C0C0C0
+</span>
+</td></tr><tr><td>
+<span style="color:#87CEEB">
+skyblue - color: #87CEEB
+</span>
+</td><td>
+<span style="color:#6A5ACD">
+slateblue - color: #6A5ACD
+</span>
+</td><td>
+<span style="color:#708090">
+slategray - color: #708090
+</span>
+</td><td>
+<span style="color:#FFFAFA">
+snow - color: #FFFAFA
+</span>
+</td></tr><tr><td>
+<span style="color:#00FF7F">
+springgreen - color: #00FF7F
+</span>
+</td><td>
+<span style="color:#4682B4">
+steelblue - color: #4682B4
+</span>
+</td><td>
+<span style="color:#D2B48C">
+tan - color: #D2B48C
+</span>
+</td><td>
+<span style="color:#008080">
+teal - color: #008080
+</span>
+</td></tr><tr><td>
+<span style="color:#D8BFD8">
+thistle - color: #D8BFD8
+</span>
+</td><td>
+<span style="color:#FF6347">
+tomato - color: #FF6347
+</span>
+</td><td>
+<span style="color:#40E0D0">
+turquoise - color: #40E0D0
+</span>
+</td><td>
+<span style="color:#EE82EE">
+violet - color: #EE82EE
+</span>
+</td></tr><tr><td>
+<span style="color:#BA55D3">
+mediumorchid - color: #BA55D3
+</span>
+</td><td>
+<span style="color:#F5DEB3">
+wheat - color: #F5DEB3
+</span>
+</td><td>
+<span style="color:#FFFFFF">
+white - color: #FFFFFF
+</span>
+</td><td>
+<span style="color:#F5F5F5">
+whitesmoke - color: #F5F5F5
+</span>
+</td></tr><tr><td>
+<span style="color:#FFFF00">
+yellow - color: #FFFF00
+</span>
+</td><td>
+<span style="color:#9ACD32">
+yellowgreen - color: #9ACD32
+</span>
+</td></tr></table></div>
+<div class="w3-container w3-padding-large" style="background-color:#f1f1f1;border:1px solid #d3d3d3; padding: 15px;">
+ <div class="w3-row">
+ <div class="w3-col l6">
+ <h2>Enter a colour next</h2>
+ <label>
+   <span class="w3-text-grey"><i>Enter the rgb() value here:</i></span>
+ </label>
+ <input id="color01" type="text" class="bblack1" style="font-size: 2em; border: 1px solid black; padding: 8px; background-color: gold; text-align: center" value="rgb(0, 191, 255)" class="w3-input w3-border" oninput="convertColor()" onchange="validate_the_colour()" onkeydown="submitOnEnter(event)">
+ <br>
+ <div class="resultStrings">
+ <div id="error01"></div>
+ <table id="resultTable">
+ <tr><td id="helpname01"></td><td id="name01"></td></tr>
+ <tr><td id="helprgb01"></td><td id="rgb01"></td></tr>
+ <tr><td id="helphex01"></td><td id="hex01"></td></tr>
+ <tr><td id="helphsl01"></td><td id="hsl01"></td></tr>
+ <tr><td id="helphwb01"></td><td id="hwb01"></td></tr>
+ <tr><td id="helpcmyk01"></td><td id="cmyk01"></td></tr>
+ <tr><td id="helpncol01"></td><td id="ncol01"></td></tr>
+ </table>
+ </div>
+ </div>
+ <div class="w3-col l6" style="padding:40px 40px 10px 40px;">
+ <div id="behindresult01">
+ <div style="height:294px" id="result01">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+ <div class="w3-row">
+ <div class="w3-col">
+ <div id="linktocp"></div>
+ </div>
+ </div>
+</div>
+<hr>
+<script>
+function convertColor() {
+  color = document.getElementById("color01").value;
+  if (color == "") {
+    validate_the_colour();
+    return;
+  }
+  color = color.toLowerCase();
+  //document.getElementsByTagName("h1")[0].style.color = w3color(color).toRgbString();
+  c = w3color(color);
+  if (c.valid) {
+    document.getElementById("resultTable").style.display = "table";
+    document.getElementById("error01").innerHTML = "";
+    document.getElementById("result01").style.backgroundColor = c.toRgbaString();
+    if (c.toName() == "") {
+      document.getElementById("name01").style.fontStyle = "italic";
+      document.getElementById("name01").style.color = "#757575";
+      document.getElementById("name01").innerHTML = "no name";
+    } else {
+      document.getElementById("name01").style.fontStyle = "normal";
+      document.getElementById("name01").style.color = "#000000";
+      document.getElementById("name01").innerHTML = c.toName();
+    }
+    document.getElementById("helpname01").innerHTML = "Name";
+    document.getElementById("hex01").innerHTML = c.toHexString();
+    document.getElementById("helphex01").innerHTML = "<a href='colors_hexadecimal.asp?color=" + c.toHexString().substr(1) + "'>Hex</a>";
+    document.getElementById("cmyk01").innerHTML = c.toCmykString();
+    document.getElementById("helpcmyk01").innerHTML = "<a href='colors_cmyk.asp?color=" + c.toCmykStringDecimal() + "'>Cmyk</a>";
+    document.getElementById("helpncol01").innerHTML = "<a href='colors_ncol.asp?color=" + c.toNcolStringDecimal() + "'>Ncol</a>";
+    if ((color.indexOf("rgba") > -1 || color.indexOf("hsla") > -1 || color.indexOf("hwba") > -1 || color.indexOf("ncola")) > -1
+      || (color.indexOf("cmyk") == -1 && color.split(",").length == 4)
+      || (color.indexOf("cmyk") > -1 && color.split(",").length == 5)) {
+      document.getElementById("rgb01").innerHTML = c.toRgbaString();
+      document.getElementById("hsl01").innerHTML = c.toHslaString();
+      document.getElementById("hwb01").innerHTML = c.toHwbaString();
+      document.getElementById("ncol01").innerHTML = c.toNcolaString();
+      document.getElementById("helprgb01").innerHTML = "Rgba";
+      document.getElementById("helphsl01").innerHTML = "Hsla";
+      document.getElementById("helphwb01").innerHTML = "Hwba";
+    } else {
+      document.getElementById("rgb01").innerHTML = c.toRgbString();
+      document.getElementById("hsl01").innerHTML = c.toHslString();
+      document.getElementById("hwb01").innerHTML = c.toHwbString();
+      document.getElementById("ncol01").innerHTML = c.toNcolString();
+      document.getElementById("helprgb01").innerHTML = "<a href='colors_rgb.asp?color=" + c.toRgbString() + "'>Rgb</a>";
+      document.getElementById("helphsl01").innerHTML = "<a href='colors_hsl.asp?color=" + c.toHslStringDecimal() + "'>Hsl</a>";
+      document.getElementById("helphwb01").innerHTML = "<a href='colors_hwb.asp?color=" + c.toHwbStringDecimal() + "'>Hwb</a>";
+    }
+  } else {
+    validate_the_colour();
+  }
+}
+function validate_the_colour() {
+  var color, c, x, i, l;
+  color = document.getElementById("color01").value;
+  c = w3color(color);
+  if (color == "" || !c.valid) {
+  document.getElementById("result01").style.backgroundColor = "#f1f1f1";
+  document.getElementById("resultTable").style.display = "none";
+  document.getElementById("error01").innerHTML = "Not a legal color value";
+  document.getElementById("hex01").innerHTML = "";
+  document.getElementById("rgb01").innerHTML = "";
+  document.getElementById("hsl01").innerHTML = "";
+  document.getElementById("hwb01").innerHTML = "";
+  document.getElementById("ncol01").innerHTML = "";
+  document.getElementById("helpname01").innerHTML = "";
+  document.getElementById("helphex01").innerHTML = "";
+  document.getElementById("helprgb01").innerHTML = "";
+  document.getElementById("helphsl01").innerHTML = "";
+  document.getElementById("helphwb01").innerHTML = "";
+  document.getElementById("helpncol01").innerHTML = "";
+  } else {
+  document.getElementById("resultTable").style.display = "table";
+  document.getElementById("error01").innerHTML = "";
+  convertColor();
+  }
+}
+function submitOnEnter(e) {
+  keyboardKey = e.which || e.keyCode;
+  if (keyboardKey == 13) {
+    validate_the_colour();
+  }
+}
+convertColor();
+</script>
+<div id="mypagediv2" style="position:relative;text-align:center;"></div>
+<br>
+</div>
+<div class="w3-col l2 m12" id="right">
+<div class="sidesection">
+<div id="skyscraper">
+</div>
+</div>
+</body>
+</html>