Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
  

<div id="sliders">
  <div class="group rgb">
    <header class="group-header">sRGB</header>
    <div class="slider">
      <header class="slider-header">R</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="rgbR" min="0" max="255" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="rgbR-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="rgbR-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">G</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="rgbG" min="0" max="255" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="rgbG-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="rgbG-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">B</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="rgbB" min="0" max="255" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="rgbB-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="rgbB-label">0</div>
    </div>
  </div>
  <div class="group crgb">
    <header class="group-header">CIE RGB</header>
    <div class="slider">
      <header class="slider-header">R</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="crgbR" min="0" max="33.3" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="crgbR-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="crgbR-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">G</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="crgbG" min="0" max="33.3" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="crgbG-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="crgbG-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">B</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="crgbB" min="0" max="33.3" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="crgbB-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="crgbB-label">0</div>
    </div>
  </div>
  <div class="group hsv">
    <header class="group-header">HSV (sRGB)</header>
    <div class="slider">
      <header class="slider-header">H</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hsvH" min="0" max="360" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hsvH-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hsvH-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">S</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hsvS" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hsvS-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hsvS-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">V</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hsvV" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hsvV-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hsvV-label">0</div>
    </div>
  </div>
  <div class="group hsl">
    <header class="group-header">HSL (sRGB)</header>
    <div class="slider">
      <header class="slider-header">H</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hslH" min="0" max="360" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hslH-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hslH-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">S</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hslS" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hslS-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hslS-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">L</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="hslL" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="hslL-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="hslL-label">0</div>
    </div>
  </div>
  <div class="group yuv">
    <header class="group-header">YUV (sRGB)</header>
    <div class="slider">
      <header class="slider-header">Y</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="yuvY" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="yuvY-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="yuvY-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">U</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="yuvU" min="-43.6" max="43.6" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="yuvU-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="yuvU-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">V</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="yuvV" min="-61.5" max="61.5" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="yuvV-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="yuvV-label">0</div>
    </div>
  </div>
  <div class="group xyz">
    <header class="group-header">CIEXYZ</header>
    <div class="slider">
      <header class="slider-header">X</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="xyzX" min="0" max="95.047" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="xyzX-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="xyzX-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">Y</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="xyzY" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="xyzY-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="xyzY-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">Z</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="xyzZ" min="0" max="108.883" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="xyzZ-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="xyzZ-label">0</div>
    </div>
  </div>
  <div class="group lab">
    <header class="group-header">CIELAB (XYZ)</header>
    <div class="slider">
      <header class="slider-header">L*</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="labL" min="0" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="labL-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="labL-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">a*</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="labA" min="-100" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="labA-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="labA-label">0</div>
    </div>
    <div class="slider">
      <header class="slider-header">b*</header>
      <div class="slider-track">
        <input class="slider-input" type="range" id="labB" min="-100" max="100" step="0.1" value="0" autocomplete="off"/>
        <canvas class="slider-gradient" id="labB-gradient" height="8"></canvas>
      </div>
      <div class="slider-label" id="labB-label">0</div>
    </div>
  </div>
  <!--+group("hcy", "HCY")
  +slider("hcyH", "H", 360)
  +slider("hcyC", "C", 100)
  +slider("hcyY", "Y", 100)
  
  -->
</div>
<div id="samples">
  <div class="group samples-group" style="border: 1px solid black;">
    <header class="group-header">Color</header>
    <div class="sample" id="samp-rgb"></div>
    <div class="sample" id="samp-hsv"></div>
    <div class="sample" id="samp-hsl"></div>
    <!--.sample#samp-hcy-->
  </div>
  <div class="group code-group">
    <header class="group-header">Code</header><span class="color-code" id="code-rgb"></span>
  </div>
</div>
  
  </div>

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Raleway:400,500|Source+Code+Pro:300,400");
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  display: flex;
  flex-flow: row nowrap;
  align-items: top;
/*   margin: 28px 60px; */
  font-family: Raleway, sans-serif;
  color: black;
  background-color: #000;
  cursor: default;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
}

.wrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
}

header {
  font-weight: 500;
}

#sliders {
  flex: 1 0 auto;
  display: flex;
  flex-flow: column nowrap;
}

.group {
  margin: 4px 4px;
  padding: 2px;
  overflow: hidden;
  background: rgba(217, 217, 217, 0.5);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 2px rgba(0, 0, 0, 0.25);
}

.group-header {
  position: relative;
  margin: -2px -2px 2px;
  padding: 2px;
  background: rgba(217, 217, 217, 0.5);
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25);
}

.slider {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 2px;
}

.slider-header {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
}

.slider-track {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  margin: 0 8px;
}

.slider-input {
  margin: 0 0 4px;
}

.slider-gradient {
  flex: 0 0 auto;
  margin: 0 0 4px;
  width: auto;
  height: 8px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25);
}

.slider-label {
  flex: 0 0 auto;
  padding: 2px 6px;
  box-sizing: border-box;
  width: 50px;
  background: rgba(247, 247, 247, 0.65);
  border-radius: 4px;
  font-family: "Source Code Pro", sans-serif;
  text-align: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset, 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

#samples {
  flex: 0 0 auto;
  display: flex;
  flex-flow: column nowrap;
  width: 300px;
}

.samples-group {
  display: flex;
  flex-flow: column nowrap;
  padding: 0;
  height: 300px;
  overflow: hidden;  
}
.samples-group .group-header {
  margin-bottom: 0;
}

.sample {
  flex: 1 0 auto;
  background-color: black;

}

.header {
  position: relative;
  padding: 2px;
  background: rgba(217, 217, 217, 0.75);
  font-weight: 500;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25);
}

.code-group {
  display: flex;
  flex-flow: column nowrap;
}

.color-code {
  align-self: center;
  font-family: "Source Code Pro", monospace;
  font-size: 4em;
  font-weight: 300;
  -webkit-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;
}
              
            
!

JS

              
                (function (win, doc, body, mt) {
  function NumProp(changed) {
    var num = 0;

    this.get = () => {return num;};
    this.set = typeof changed === "function" ?
    v => {if (typeof v === "string") v = parseFloat(v);if (typeof v === "number") changed(num = v);} :
    v => {if (typeof v === "string") v = parseFloat(v);if (typeof v === "number") num = v;};
  }

  function TypedProp(ctor) {
    var val = null;

    this.get = function () {return val;};
    this.set = function (value) {if (value instanceof ctor || value === null) val = value;};
  }

  function Rgb(r, g, b) {
    Object.defineProperties(this, {
      R: new NumProp(),
      G: new NumProp(),
      B: new NumProp(),
      dR: { get: function () {return this.R * 255;} },
      dG: { get: function () {return this.G * 255;} },
      dB: { get: function () {return this.B * 255;} } });


    this.R = r;
    this.G = g;
    this.B = b;
  }

  Rgb.prototype = {
    toHsv: function () {return Convert.RgbToHsv(this);},
    toHsl: function () {return Convert.RgbToHsl(this);},
    toHsvHsl: function () {return Convert.RgbToHsvHsl(this);},
    toYuv: function () {return Convert.RgbToYuv(this);},
    toXyz: function () {return Convert.RgbToXyz(this);},
    toString: function () {
      return "rgb(" +
      Math.round(this.dR) + "," +
      Math.round(this.dG) + "," +
      Math.round(this.dB) + ")";
    } };


  Rgb.fromDenorm = function (r, g, b) {
    return new Rgb(r / 255, g / 255, b / 255);
  };

  function Crgb(r, g, b) {
    Object.defineProperties(this, {
      R: new NumProp(),
      G: new NumProp(),
      B: new NumProp(),
      dR: { get: function () {return this.R * 100;} },
      dG: { get: function () {return this.G * 100;} },
      dB: { get: function () {return this.B * 100;} } });


    this.R = r;
    this.G = g;
    this.B = b;
  }

  Crgb.prototype = {
    toXyz: function () {return Convert.CrgbToXyz(this);},
    toString: function () {return this.toXyz().toString();} };


  Crgb.fromDenorm = function (r, g, b) {
    return new Crgb(r / 100, g / 100, b / 100);
  };

  function Hsv(h, s, v) {
    Object.defineProperties(this, {
      H: new NumProp(),
      S: new NumProp(),
      V: new NumProp(),
      dH: { get: function () {return this.H;} },
      dS: { get: function () {return this.S * 100;} },
      dV: { get: function () {return this.V * 100;} } });


    this.H = h;
    this.S = s;
    this.V = v;
  }

  Hsv.prototype = {
    toRgb: function () {return Convert.HsvToRgb(this);},
    toHsl: function () {return Convert.HsvToHsl(this);},
    toRgbHsl: function () {return Convert.HsvToRgbHsl(this);},
    toString: function () {return this.toRgb().toString();} };


  Hsv.fromDenorm = function (h, s, v) {
    return new Hsv(h % 360, s / 100, v / 100);
  };

  function Hsl(h, s, l) {
    Object.defineProperties(this, {
      H: new NumProp(),
      S: new NumProp(),
      L: new NumProp(),
      dH: { get: function () {return this.H;} },
      dS: { get: function () {return this.S * 100;} },
      dL: { get: function () {return this.L * 100;} } });


    this.H = h;
    this.S = s;
    this.L = l;
  }

  Hsl.prototype = {
    toRgb: function () {return Convert.HslToRgb(this);},
    toHsv: function () {return Convert.HslToHsv(this);},
    toRgbHsv: function () {return Convert.HslToRgbHsv(this);},
    toString: function () {return this.toRgb().toString();} };


  Hsl.fromDenorm = function (h, s, l) {
    return new Hsl(h % 360, s / 100, l / 100);
  };

  function Yuv(y, u, v) {
    Object.defineProperties(this, {
      Y: new NumProp(),
      U: new NumProp(),
      V: new NumProp(),
      dY: { get: function () {return this.Y * 100;} },
      dU: { get: function () {return this.U * 100;} },
      dV: { get: function () {return this.V * 100;} } });


    this.Y = y;
    this.U = u;
    this.V = v;
  }

  Yuv.prototype = {
    toRgb: function () {return Convert.YuvToRgb(this);},
    toString: function () {return this.toRgb().toString();} };


  Yuv.fromDenorm = function (y, u, v) {
    return new Yuv(y / 100, u / 100, v / 100);
  };

  function Xyz(x, y, z) {
    Object.defineProperties(this, {
      X: new NumProp(),
      Y: new NumProp(),
      Z: new NumProp(),
      dX: { get: function () {return this.X * 100;} },
      dY: { get: function () {return this.Y * 100;} },
      dZ: { get: function () {return this.Z * 100;} } });


    this.X = x;
    this.Y = y;
    this.Z = z;
  }

  Xyz.prototype = {
    toRgb: function () {return Convert.XyzToRgb(this);},
    toCrgb: function () {return Convert.XyzToCrgb(this);},
    toLab: function () {return Convert.XyzToLab(this);},
    toString: function () {return this.toRgb().toString();} };


  Xyz.fromDenorm = function (x, y, z) {
    return new Xyz(x / 100, y / 100, z / 100);
  };

  function Lab(l, a, b) {
    Object.defineProperties(this, {
      L: new NumProp(),
      A: new NumProp(),
      B: new NumProp(),
      dL: { get: function () {return this.L;} },
      dA: { get: function () {return this.A;} },
      dB: { get: function () {return this.B;} } });


    this.L = l;
    this.A = a;
    this.B = b;
  }

  Lab.prototype = {
    toXyz: function () {return Convert.LabToXyz(this);},
    toString: function () {return this.toXyz().toString();} };


  Lab.fromDenorm = function (l, a, b) {
    return new Lab(l, a, b);
  };

  function Hcy(h, c, y) {
    Object.defineProperties(this, {
      H: new NumProp(),
      C: new NumProp(),
      Y: new NumProp(),
      dH: { get: function () {return this.H;} },
      dC: { get: function () {return this.C * 100;} },
      dY: { get: function () {return this.Y * 100;} } });

  }

  Hcy.prototype = {
    toRgb: function () {return Convert.HcyToRgb(this);},
    toString: function () {return this.toRgb().toString();} };


  Hcy.fromDenorm = function (h, c, y) {
    return new Hcy(h % 360, c / 100, y / 100);
  };

  var Convert = {
    HCToCh: function (h, c) {
      h /= 60;
      var x = c * (1 - mt.abs(h % 2 - 1));

      switch (h | 0) {
        case 0:
          return new Rgb(c, x, 0);
        case 1:
          return new Rgb(x, c, 0);
        case 2:
          return new Rgb(0, c, x);
        case 3:
          return new Rgb(0, x, c);
        case 4:
          return new Rgb(x, 0, c);
        case 5:
          return new Rgb(c, 0, x);
        default:
          return new Rgb(0, 0, 0);}

    },
    ChToHC: function (ch) {
      var c = mt.max(ch.R, ch.G, ch.B),h,x;

      if (c === 0) {h = 0;} else

      {
        if (ch.B === 0) {
          if (ch.R === c) {h = 0;x = ch.G;} else
          {h = 2;x = -ch.R;}
        } else
        if (ch.R === 0) {
          if (ch.G === c) {h = 2;x = ch.B;} else
          {h = 4;x = -ch.G;}
        } else
        if (ch.G === 0) {
          if (ch.B === c) {h = 4;x = ch.R;} else
          {h = 6;x = -ch.B;}
        }

        h = (h + x / c) * 60;
      }
      return { h: h, c: c };
    },

    SvVToC: function (sv, v) {return v * sv;},
    SlLToC: function (sl, l) {return (1 - mt.abs(2 * l - 1)) * sl;},

    VCToSv: function (v, c) {return v == 0 ? 0 : c / v;},
    LCToSl: function (l, c) {l = 1 - mt.abs(2 * l - 1);return l == 0 ? 0 : c / l;},

    VCToM: function (v, c) {return v - c;},
    LCToM: function (l, c) {return l - c / 2;},

    MCToV: function (m, c) {return m + c;},
    MCToL: function (m, c) {return m + c / 2;},

    YChToM: function (y, ch) {return y - (ch.r * .3 + ch.g * .59 + ch.b * .11);},

    VCToL: function (v, c) {return v - c / 2;},
    LCToV: function (l, c) {return l + c / 2;},

    MChToRgb: function (m, ch) {
      return new Rgb(ch.R + m, ch.G + m, ch.B + m);
    },
    RgbToMCh: function (rgb) {
      var m = mt.min(rgb.R, rgb.G, rgb.B);

      return { m: m, ch: new Rgb(rgb.R - m, rgb.G - m, rgb.B - m) };
    },

    RgbToHsv: function (rgb) {
      var { ch: ch, m: m } = Convert.RgbToMCh(rgb),
      { h: h, c: c } = Convert.ChToHC(ch),
      v = Convert.MCToV(m, c);

      return new Hsv(h, Convert.VCToSv(v, c), v);
    },
    RgbToHsl: function (rgb) {
      var { ch: ch, m: m } = Convert.RgbToMCh(rgb),
      { h: h, c: c } = Convert.ChToHC(ch),
      l = Convert.MCToL(m, c);

      return new Hsl(h, Convert.LCToSl(l, c), l);
    },
    RgbToHsvHsl: function (rgb) {
      var { ch: ch, m: m } = Convert.RgbToMCh(rgb),
      { h: h, c: c } = Convert.ChToHC(ch),
      v = Convert.MCToV(m, c),l = Convert.MCToL(m, c);

      return {
        hsv: new Hsv(h, Convert.VCToSv(v, c), v),
        hsl: new Hsl(h, Convert.LCToSl(l, c), l) };

    },

    HsvToRgb: function (hsv) {
      var c = Convert.SvVToC(hsv.S, hsv.V);

      return Convert.MChToRgb(Convert.VCToM(hsv.V, c), Convert.HCToCh(hsv.H, c));
    },
    HsvToHsl: function (hsv) {
      var c = Convert.SvVToC(hsv.S, hsv.V),
      m = Convert.VCToM(hsv.V, c),
      l = Convert.MCToL(m, c);
      return new Hsl(hsv.H, Convert.LCToSl(l, c), l);
    },
    HsvToRgbHsl: function (hsv) {return { rgb: new Rgb(), hsl: new Hsl() };},

    HslToRgb: function (hsl) {
      var c = Convert.SlLToC(hsl.S, hsl.L);

      return Convert.MChToRgb(Convert.LCToM(hsl.L, c), Convert.HCToCh(hsl.H, c));
    },
    HslToHsv: function (hsl) {
      var c = Convert.SlLToC(hsl.S, hsl.L),
      m = Convert.LCToM(hsl.L, c),
      v = Convert.MCToV(m, c);
      return new Hsv(hsl.H, Convert.VCToSv(v, c), v);
    },
    HslToRgbHsv: function (hsl) {return { rgb: new Rgb(), hsv: new Hsv() };},

    RgbToYuv: function (rgb) {
      return new Yuv(
      mt.max(+0.000, mt.min(1.000, +0.21260 * rgb.R + +0.71520 * rgb.G + +0.07220 * rgb.B)),
      mt.max(-0.436, mt.min(0.436, -0.09991 * rgb.R + -0.33609 * rgb.G + +0.43600 * rgb.B)),
      mt.max(-0.615, mt.min(0.615, +0.61500 * rgb.R + -0.55861 * rgb.G + -0.05639 * rgb.B)));

    },
    YuvToRgb: function (yuv) {
      return new Rgb(
      mt.max(0, mt.min(1, +1.00000 * yuv.Y + +0.00000 * yuv.U + +1.28033 * yuv.V)),
      mt.max(0, mt.min(1, +1.00000 * yuv.Y + -0.21482 * yuv.U + -0.38059 * yuv.V)),
      mt.max(0, mt.min(1, +1.00000 * yuv.Y + +2.12798 * yuv.U + +0.00000 * yuv.V)));

    },

    SRGB_F: 12.92,

    SRGB_A: 0.055,
    SRGB_AP1: 1.055,

    Srgbf: function (c) {return c > 0.0031308 ? Convert.SRGB_AP1 * mt.pow(c, 1 / 2.4) - Convert.SRGB_A : Convert.SRGB_F * c;},
    Srgbfi: function (c) {return c > 0.04045 ? mt.pow((c + Convert.SRGB_A) / Convert.SRGB_AP1, 2.4) : c / Convert.SRGB_F;},

    RgbToXyz: function (rgb) {
      let rl = Convert.Srgbfi(rgb.R),gl = Convert.Srgbfi(rgb.G),bl = Convert.Srgbfi(rgb.B);

      return new Xyz(
      0.4124 * rl + 0.3576 * gl + 0.1805 * bl,
      0.2126 * rl + 0.7152 * gl + 0.0722 * bl,
      0.0193 * rl + 0.1192 * gl + 0.9505 * bl);

    },
    XyzToRgb: function (xyz) {
      let rl = +3.2406 * xyz.X + -1.5372 * xyz.Y + -0.4986 * xyz.Z,
      gl = -0.9689 * xyz.X + +1.8758 * xyz.Y + +0.0415 * xyz.Z,
      bl = +0.0557 * xyz.X + -0.2040 * xyz.Y + +1.0570 * xyz.Z;

      return new Rgb(
      mt.max(0, mt.min(1, Convert.Srgbf(rl))),
      mt.max(0, mt.min(1, Convert.Srgbf(gl))),
      mt.max(0, mt.min(1, Convert.Srgbf(bl))));

    },

    CrgbToXyz: function (crgb) {
      return new Xyz(
      (0.49000 * crgb.R + 0.3100 * crgb.G + 0.20000 * crgb.B) / 0.17697,
      (0.17697 * crgb.R + 0.8124 * crgb.G + 0.01063 * crgb.B) / 0.17697,
      (0.00000 * crgb.R + 0.0100 * crgb.G + 0.99000 * crgb.B) / 0.17697);

    },
    XyzToCrgb: function (xyz) {
      return new Crgb(
      (+2.36461385 * xyz.X + -0.89654057 * xyz.Y + -0.46807328 * xyz.Z) * 0.17697,
      (-0.51516621 * xyz.X + +1.42640810 * xyz.Y + +0.08875810 * xyz.Z) * 0.17697,
      (+0.00520370 * xyz.X + -0.01440816 * xyz.Y + +1.00920446 * xyz.Z) * 0.17697);

    },

    LAB_XN: 0.95047,
    LAB_YN: 1.00000,
    LAB_ZN: 1.08883,

    LAB_FL: 116,
    LAB_FA: 500,
    LAB_FB: -200,

    LAB_OL: 16,

    LAB_D: 6 / 29,
    LAB_D3: 6 * 6 * 6 / (29 * 29 * 29),
    LAB_3D2: 3 * (6 * 6) / (29 * 29),
    LAB_OT: 4 / 29,

    Labf: function (t) {return t > Convert.LAB_D3 ? mt.pow(t, 1 / 3) : t / Convert.LAB_3D2 + Convert.LAB_OT;},
    Labfi: function (t) {return t > Convert.LAB_D ? t * t * t : Convert.LAB_3D2 * (t - Convert.LAB_OT);},

    XyzToLab: function (xyz) {
      let y = Convert.Labf(xyz.Y / Convert.LAB_YN);
      return new Lab(
      Convert.LAB_FL * y - Convert.LAB_OL,
      Convert.LAB_FA * (Convert.Labf(xyz.X / Convert.LAB_XN) - y),
      Convert.LAB_FB * (Convert.Labf(xyz.Z / Convert.LAB_ZN) - y));

    },
    LabToXyz: function (lab) {
      let l = (lab.L + Convert.LAB_OL) / Convert.LAB_FL;
      return new Xyz(
      Convert.LAB_XN * Convert.Labfi(l + lab.A / Convert.LAB_FA),
      Convert.LAB_YN * Convert.Labfi(l),
      Convert.LAB_ZN * Convert.Labfi(l + lab.B / Convert.LAB_FB));

    },

    HcyToRgb: function (hcy) {
      var ch = Convert.HCToCh(hcy.H, hcy.C),
      m = Convert.YChToM(hcy.Y, ch);

      return Convert.MChToRgb(m, ch);
    } };


  var rgb = new Rgb(),
  crgb = new Crgb(),
  hsv = new Hsv(),
  hsl = new Hsl(),
  yuv = new Yuv(),
  xyz = new Xyz(),
  lab = new Lab(),
  hcy = new Hcy(),
  sliders = $$(".slider-input"),
  sampRgb = $("samp-rgb"),
  sampHsv = $("samp-hsv"),
  sampHsl = $("samp-hsl"),
  sampHcy = $("samp-hcy"),
  codeRgb = $("code-rgb");

  sliders.forEach((e, i, a) => {
    sliders[e.id] = e;
    e.label = $(e.id + "-label");
    e.gradCvs = $(e.id + "-gradient");
    e.gradCtx = e.gradCvs.getContext("2d");
  });

  function setSlider(slider, value) {
    slider.label.innerText = Math.round(slider.value = value);
  }

  function beginDrawGradient(ctx) {
    ctx.save();

    return ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
  }

  function endDrawGradient(ctx, g) {
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.restore();
  }

  function drawRgbRGradient(ctx, rgb) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Rgb(0, rgb.G, rgb.B));
    g.addColorStop(1, new Rgb(1, rgb.G, rgb.B));

    endDrawGradient(ctx, g);
  }

  function drawRgbGGradient(ctx, rgb) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Rgb(rgb.R, 0, rgb.B));
    g.addColorStop(1, new Rgb(rgb.R, 1, rgb.B));

    endDrawGradient(ctx, g);
  }

  function drawRgbBGradient(ctx, rgb) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Rgb(rgb.R, rgb.G, 0));
    g.addColorStop(1, new Rgb(rgb.R, rgb.G, 1));

    endDrawGradient(ctx, g);
  }

  function drawHsvHGradient(ctx, hsv) {
    let g = beginDrawGradient(ctx),
    zero = new Hsv(0, hsv.S, hsv.V);

    g.addColorStop(0, zero);
    g.addColorStop(1 / 6, new Hsv(60, hsv.S, hsv.V));
    g.addColorStop(1 / 3, new Hsv(120, hsv.S, hsv.V));
    g.addColorStop(.5, new Hsv(180, hsv.S, hsv.V));
    g.addColorStop(2 / 3, new Hsv(240, hsv.S, hsv.V));
    g.addColorStop(5 / 6, new Hsv(300, hsv.S, hsv.V));
    g.addColorStop(1, zero);

    endDrawGradient(ctx, g);
  }

  function drawHsvSGradient(ctx, hsv) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Hsv(hsv.H, 0, hsv.V));
    g.addColorStop(1, new Hsv(hsv.H, 1, hsv.V));

    endDrawGradient(ctx, g);
  }

  function drawHsvVGradient(ctx, hsv) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Hsv(hsv.H, hsv.S, 0));
    g.addColorStop(1, new Hsv(hsv.H, hsv.S, 1));

    endDrawGradient(ctx, g);
  }

  function drawHslHGradient(ctx, hsl) {
    let g = beginDrawGradient(ctx),
    zero = new Hsl(0, hsl.S, hsl.L);

    g.addColorStop(0, zero);
    g.addColorStop(1 / 6, new Hsl(60, hsl.S, hsl.L));
    g.addColorStop(1 / 3, new Hsl(120, hsl.S, hsl.L));
    g.addColorStop(.5, new Hsl(180, hsl.S, hsl.L));
    g.addColorStop(2 / 3, new Hsl(240, hsl.S, hsl.L));
    g.addColorStop(5 / 6, new Hsl(300, hsl.S, hsl.L));
    g.addColorStop(1, zero);

    endDrawGradient(ctx, g);
  }

  function drawHslSGradient(ctx, hsl) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Hsl(hsl.H, 0, hsl.L));
    g.addColorStop(1, new Hsl(hsl.H, 1, hsl.L));

    endDrawGradient(ctx, g);
  }

  function drawHslLGradient(ctx, hsl) {
    let g = beginDrawGradient(ctx);

    g.addColorStop(0, new Hsl(hsl.H, hsl.S, 0));
    g.addColorStop(.5, new Hsl(hsl.H, hsl.S, .5));
    g.addColorStop(1, new Hsl(hsl.H, hsl.S, 1));

    endDrawGradient(ctx, g);
  }

  function drawGradients() {
    drawRgbRGradient(sliders.rgbR.gradCtx, rgb);
    drawRgbGGradient(sliders.rgbG.gradCtx, rgb);
    drawRgbBGradient(sliders.rgbB.gradCtx, rgb);

    drawHsvHGradient(sliders.hsvH.gradCtx, hsv);
    drawHsvSGradient(sliders.hsvS.gradCtx, hsv);
    drawHsvVGradient(sliders.hsvV.gradCtx, hsv);

    drawHslHGradient(sliders.hslH.gradCtx, hsl);
    drawHslSGradient(sliders.hslS.gradCtx, hsl);
    drawHslLGradient(sliders.hslL.gradCtx, hsl);
  }

  function setRgbSliders() {
    setSlider(sliders.rgbR, rgb.dR);
    setSlider(sliders.rgbG, rgb.dG);
    setSlider(sliders.rgbB, rgb.dB);
  }

  function setCrgbSliders() {
    setSlider(sliders.crgbR, crgb.dR);
    setSlider(sliders.crgbG, crgb.dG);
    setSlider(sliders.crgbB, crgb.dB);
  }

  function setHsvSliders() {
    setSlider(sliders.hsvH, hsv.dH);
    setSlider(sliders.hsvS, hsv.dS);
    setSlider(sliders.hsvV, hsv.dV);
  }

  function setHslSliders() {
    setSlider(sliders.hslH, hsl.dH);
    setSlider(sliders.hslS, hsl.dS);
    setSlider(sliders.hslL, hsl.dL);
  }

  function setYuvSliders() {
    setSlider(sliders.yuvY, yuv.dY);
    setSlider(sliders.yuvU, yuv.dU);
    setSlider(sliders.yuvV, yuv.dV);
  }

  function setXyzSliders() {
    setSlider(sliders.xyzX, xyz.dX);
    setSlider(sliders.xyzY, xyz.dY);
    setSlider(sliders.xyzZ, xyz.dZ);
  }

  function setLabSliders() {
    setSlider(sliders.labL, lab.dL);
    setSlider(sliders.labA, lab.dA);
    setSlider(sliders.labB, lab.dB);
  }

  function setHcySliders() {
    setSlider(sliders.hcyH, hcy.dH);
    setSlider(sliders.hcyC, hcy.dC);
    setSlider(sliders.hcyY, hcy.dY);
  }

  function hexComp(comp) {
    comp = Math.round(comp);
    let hi = comp >> 4;
    return hi.toString(16) + (comp - (hi << 4)).toString(16);
  }

  function setCodes() {
    codeRgb.innerText = "#" + hexComp(rgb.dR) + hexComp(rgb.dG) + hexComp(rgb.dB);
  }

  function setSamples() {
    sampRgb.style.backgroundColor = rgb;
    sampHsv.style.backgroundColor = hsv;
    sampHsl.style.backgroundColor = hsl;
    //sampHcy.style.backgroundColor = hcy;

    setCodes();
  }

  new Elements([sliders.rgbR, sliders.rgbG, sliders.rgbB]).addEvent("input", e => {
    rgb = Rgb.fromDenorm(sliders.rgbR.value, sliders.rgbG.value, sliders.rgbB.value);

    var { hsv: mHsv, hsl: mHsl } = rgb.toHsvHsl();
    hsv = mHsv;
    hsl = mHsl;
    yuv = rgb.toYuv();
    xyz = rgb.toXyz();
    crgb = xyz.toCrgb();
    lab = xyz.toLab();

    setCrgbSliders();
    setHsvSliders();
    setHslSliders();
    setYuvSliders();
    setXyzSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = rgb;
  });

  new Elements([sliders.crgbR, sliders.crgbG, sliders.crgbB]).addEvent("input", e => {
    crgb = Crgb.fromDenorm(sliders.crgbR.value, sliders.crgbG.value, sliders.crgbB.value);

    xyz = crgb.toXyz();
    rgb = xyz.toRgb();
    var { hsv: mHsv, hsl: mHsl } = rgb.toHsvHsl();
    hsv = mHsv;
    hsl = mHsl;
    yuv = rgb.toYuv();
    lab = xyz.toLab();

    setRgbSliders();
    setHsvSliders();
    setHslSliders();
    setYuvSliders();
    setXyzSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = rgb;
  });

  new Elements([sliders.hsvH, sliders.hsvS, sliders.hsvV]).addEvent("input", e => {
    hsv = Hsv.fromDenorm(sliders.hsvH.value, sliders.hsvS.value, sliders.hsvV.value);

    //var { rgb: mRgb, hsl: mHsl } = hsv.toRgbHsl();
    //rgb = mRgb; hsl = mHsl;
    rgb = hsv.toRgb();
    hsl = hsv.toHsl();
    yuv = rgb.toYuv();
    xyz = rgb.toXyz();
    crgb = xyz.toCrgb();
    lab = xyz.toLab();

    setRgbSliders();
    setCrgbSliders();
    setHslSliders();
    setYuvSliders();
    setXyzSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = hsv;
  });

  new Elements([sliders.hslH, sliders.hslS, sliders.hslL]).addEvent("input", e => {
    hsl = Hsl.fromDenorm(sliders.hslH.value, sliders.hslS.value, sliders.hslL.value);

    //var { rgb: mRgb, hsv: mHsv } = hsl.toRgbHsv();
    //rgb = mRgb; hsv = mHsv;
    rgb = hsl.toRgb();
    hsv = hsl.toHsv();
    yuv = rgb.toYuv();
    xyz = rgb.toXyz();
    crgb = xyz.toCrgb();
    lab = xyz.toLab();

    setRgbSliders();
    setCrgbSliders();
    setHsvSliders();
    setYuvSliders();
    setXyzSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = hsl;
  });

  new Elements([sliders.yuvY, sliders.yuvU, sliders.yuvV]).addEvent("input", e => {
    yuv = Yuv.fromDenorm(sliders.yuvY.value, sliders.yuvU.value, sliders.yuvV.value);

    rgb = yuv.toRgb();
    var { hsv: mHsv, hsl: mHsl } = rgb.toHsvHsl();
    hsv = mHsv;
    hsl = mHsl;
    xyz = rgb.toXyz();
    crgb = xyz.toCrgb();
    lab = xyz.toLab();

    setRgbSliders();
    setCrgbSliders();
    setHsvSliders();
    setHslSliders();
    setXyzSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = rgb;
  });

  new Elements([sliders.xyzX, sliders.xyzY, sliders.xyzZ]).addEvent("input", e => {
    xyz = Xyz.fromDenorm(sliders.xyzX.value, sliders.xyzY.value, sliders.xyzZ.value);

    rgb = xyz.toRgb();
    crgb = xyz.toCrgb();
    var { hsv: mHsv, hsl: mHsl } = rgb.toHsvHsl();
    hsv = mHsv;
    hsl = mHsl;
    yuv = rgb.toYuv();
    lab = xyz.toLab();

    setRgbSliders();
    setCrgbSliders();
    setHsvSliders();
    setHslSliders();
    setYuvSliders();
    setLabSliders();
    setSamples();

    body.style.backgroundColor = rgb;
  });

  new Elements([sliders.labL, sliders.labA, sliders.labB]).addEvent("input", e => {
    lab = Lab.fromDenorm(sliders.labL.value, sliders.labA.value, sliders.labB.value);

    xyz = lab.toXyz();
    rgb = xyz.toRgb();
    crgb = xyz.toCrgb();
    var { hsv: mHsv, hsl: mHsl } = rgb.toHsvHsl();
    hsv = mHsv;
    hsl = mHsl;
    yuv = rgb.toYuv();

    setRgbSliders();
    setCrgbSliders();
    setHsvSliders();
    setHslSliders();
    setYuvSliders();
    setXyzSliders();
    setSamples();

    body.style.backgroundColor = rgb;
  });

  /*new Elements([sliders.hcyH, sliders.hcyC, sliders.hcyY]).addEvent("input", (e) => {
    hcy = Hcy.fromDenorm(sliders.hcyH.value, sliders.hcyC.value, sliders.hcyY.value);
    
    //setHcySliders();
    setSamples();
    
    body.style.backgroundColor = hcy;
  });*/

  sliders.addEvent("input", e => {
    e.target.label.innerText = Math.round(e.target.value);

    drawGradients();
  });

  function selectEl(el) {
    let range = document.createRange();
    range.selectNodeContents(el);
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }

  codeRgb.addEvent("click", e => {
    selectEl(codeRgb);
  }).addEvent("selectstart", e => {
    event.preventDefault();
    selectEl(codeRgb);
  }).addEvent("selectend", e => {
    event.preventDefault();
    selectEl(codeRgb);
  });

  setCodes();
  drawGradients();
})(window, document, document.body, Math);
              
            
!
999px

Console