JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="http://rawgit.com/zschuessler/DeltaE/master/dist/deltae.global.min.js"></script>
<script type="text/javascript">
var conversions = (function () {
  return {
    rgb2hsl: rgb2hsl,
    rgb2hsv: rgb2hsv,
    rgb2hwb: rgb2hwb,
    rgb2cmyk: rgb2cmyk,
    rgb2keyword: rgb2keyword,
    rgb2xyz: rgb2xyz,
    rgb2lab: rgb2lab,
    rgb2lch: rgb2lch,
    rgb2ansi16: rgb2ansi16,
    rgb2ansi: rgb2ansi,

    hsl2rgb: hsl2rgb,
    hsl2hsv: hsl2hsv,
    hsl2hwb: hsl2hwb,
    hsl2cmyk: hsl2cmyk,
    hsl2keyword: hsl2keyword,
    hsl2ansi16: hsl2ansi16,
    hsl2ansi: hsl2ansi,

    hsv2rgb: hsv2rgb,
    hsv2hsl: hsv2hsl,
    hsv2hwb: hsv2hwb,
    hsv2cmyk: hsv2cmyk,
    hsv2keyword: hsv2keyword,
    hsv2ansi16: hsv2ansi16,
    hsv2ansi: hsv2ansi,

    hwb2rgb: hwb2rgb,
    hwb2hsl: hwb2hsl,
    hwb2hsv: hwb2hsv,
    hwb2cmyk: hwb2cmyk,
    hwb2keyword: hwb2keyword,
    hwb2ansi16: hwb2ansi16,
    hwb2ansi: hwb2ansi,

    cmyk2rgb: cmyk2rgb,
    cmyk2hsl: cmyk2hsl,
    cmyk2hsv: cmyk2hsv,
    cmyk2hwb: cmyk2hwb,
    cmyk2keyword: cmyk2keyword,
    cmyk2ansi16: cmyk2ansi16,
    cmyk2ansi: cmyk2ansi,

    keyword2rgb: keyword2rgb,
    keyword2hsl: keyword2hsl,
    keyword2hsv: keyword2hsv,
    keyword2hwb: keyword2hwb,
    keyword2cmyk: keyword2cmyk,
    keyword2lab: keyword2lab,
    keyword2xyz: keyword2xyz,
    keyword2ansi16: keyword2ansi16,
    keyword2ansi: keyword2ansi,

    xyz2rgb: xyz2rgb,
    xyz2lab: xyz2lab,
    xyz2lch: xyz2lch,

    lab2xyz: lab2xyz,
    lab2rgb: lab2rgb,
    lab2lch: lab2lch,

    lch2lab: lch2lab,
    lch2xyz: lch2xyz,
    lch2rgb: lch2rgb,

    ansi162rgb: ansi162rgb,
    ansi162hsl: ansi162hsl,
    ansi162hsv: ansi162hsv,
    ansi162hwb: ansi162hwb,
    ansi162cmyk: ansi162cmyk,
    ansi162keyword: ansi162keyword,

    ansi2rgb: ansi2rgb,
    ansi2hsl: ansi2hsl,
    ansi2hsv: ansi2hsv,
    ansi2hwb: ansi2hwb,
    ansi2cmyk: ansi2cmyk,
    ansi2keyword: ansi2keyword,
  }


  function rgb2hsl(rgb) {
    var r = rgb[0]/255,
        g =...

CSS

body {
    margin: 0px;
    padding: 0px;
}

#colors, #colors2 {
    overflow: hidden;
}

JavaScript

var getClosestColor = (function () {
    function rgb2lab(rgb) {
        var lab = converter.rgb2lab(rgb);
        return {L: lab[0], A: lab[1], B: lab[2]};
    }

    var WEB_COLORS_RGB = [
           ...