React

by Piyush Baliyan

HTML

<div id="app"></div>

CSS

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
  display: block;
}

a {
  background-color: transparent;
}

a:active,a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,kbd,pre,samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

.colors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.swatch {
  box-sizing: border-box;
  width: 180px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 14px;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
  border-radius: 6px;
  overflow: hidden;
}

.swatch .sample {
  height: 60px;
}

.swatch .name {
  text-align: center;
  padding: 0 5px;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.2em;
  color: #777;
}

.swatch .codes {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow:...

React

class TodoApp extends React.Component {
    constructor(props) {
      super(props)
      this.state = {

        name: 'Some Colors',
        colors: [{
            code: [234, 56, 23],
            name: 'torquoise'
          },
        ]
      }
    }
    
    HSLtoString (hsl) {
      return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
    }
    
    RGBtoString (rgb) {
      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
    }

    hslToRgb(h, s, l) {
    	h = h/360; s = s/100; l = l/100;
      let r;
      let g;
      let 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);
      }

      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

  
  render() {
    return (
      <div>
        <ol>
        {this.state.colors.map(s => {
        	debugger;
        	var rgb = this.RGBtoString(this.hslToRgb.apply(null, s.code));
          var hsl = this.HSLtoString(s.code);
        	return <li className="swatch" key={s.code.name}>
               <div className="sample" style={{backgroundColor: hsl}}></div>
               <h2 className="name">{s.name || s.code}</h2>
               <ul className="codes">
                  <li className="code rgb" data-clipboard-text={rgb}>
                     <span className="label">{rgb}</span>
                  </li>
                  <li className="code hsl" data-clipboard-text={hsl}>
        ...