use different colour conversion

components/input.js

@@ -3,6 +3,7 @@ const React = require('react')
 const ReactDOM = require('react-dom')
 const create = require('create-react-class')
 const Promise = require('bluebird')
+const colorConvert = require('color-convert')
 
 let input = create({
   displayName: "Input",
@@ -126,39 +127,10 @@ function rainbowTransform(text) {
     if (h > 360) {
       h = 0;
     }
-    return `<font color="${hslToHex(h, 100, 50)}">${char}</font>`;
+    return `<font color="${colorConvert.hsl.hex(h, 100, 50)}">${char}</font>`;
   });
   let rainbow = rainbowArray.join("");
   return rainbow;
 }
 
-function hslToHex(h, s, l) {
-  h /= 360;
-  s /= 100;
-  l /= 100;
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = l; // achromatic
-  } else {
-    const hue2rgb = (p, q, t) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-  const toHex = x => {
-    const hex = Math.round(x * 255).toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
 module.exports = input

package.json

@@ -17,6 +17,7 @@
     "blueimp-canvas-to-blob": "^3.14.0",
     "browserify": "^16.2.3",
     "budo": "^11.5.0",
+    "color-convert": "^2.0.0",
     "create-react-class": "^15.6.3",
     "debounce": "^1.2.0",
     "default-value": "^1.0.0",

shrinkwrap.yaml

@@ -7,6 +7,7 @@ dependencies:
   blueimp-canvas-to-blob: 3.14.0
   browserify: 16.2.3
   budo: 11.5.0
+  color-convert: 2.0.0
   create-react-class: 15.6.3
   debounce: 1.2.0
   default-value: 1.0.0
@@ -2308,10 +2309,22 @@ packages:
     dev: false
     resolution:
       integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  /color-convert/2.0.0:
+    dependencies:
+      color-name: 1.1.4
+    dev: false
+    engines:
+      node: '>=7.0.0'
+    resolution:
+      integrity: sha512-hzTicsCJIHdxih9+2aLR1tNGZX5qSJGRHDPVwSY26tVrEf55XNajLOBWz2UuWSIergszA09/bqnOiHyqx9fxQg==
   /color-name/1.1.3:
     dev: false
     resolution:
       integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+  /color-name/1.1.4:
+    dev: false
+    resolution:
+      integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
   /color-support/1.1.3:
     hasBin: true
     resolution:
@@ -9633,6 +9646,7 @@ specifiers:
   blueimp-canvas-to-blob: ^3.14.0
   browserify: ^16.2.3
   budo: ^11.5.0
+  color-convert: ^2.0.0
   create-react-class: ^15.6.3
   debounce: ^1.2.0
   default-value: ^1.0.0