<div id="root"></div>
.c-card {
  position: relative;
  border-radius: 5px;
  width: 150px;
  margin: 0 10px 10px 0;
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
  float: left;
  
  &__header {
    height: 60px;
  }
  
  &__body {
    padding: 10px;
  }
  
}

.c-p {
  margin: 0 0 5px 0;
}

.u-bold {
  font-weight: bold;
}

.row {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}
View Compiled
const scale = [0, 15, 30, 45, 60, 75];

const colors = {
  "blue": {
    "basis": "#2b7de8",
  },
  "orange": {
    "basis": "#ffcb7a",
  },
  "grey": {
    "basis": "#4d4d4d",
  },
};

// from https://gist.github.com/jedfoster/7939513
var mix = function(color_1, color_2, weight) {
  function d2h(d) { return d.toString(16); }
  function h2d(h) { return parseInt(h, 16); }
  
  var color_1 = color_1.toString().replace('#', '');
  var color_2 = color_2.toString().replace('#', '');
  
  weight = (typeof(weight) !== 'undefined') ? weight : 50;

  var color = "#";
  
  for(var i = 0; i <= 5; i += 2) {
    var v1 = h2d(color_1.toString().substr(i, 2)),
        v2 = h2d(color_2.substr(i, 2)),
        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0))); 

    while(val.length < 2) { val = '0' + val; } 
    color += val;
  }
    
  return color;
};

var ColorPanel = React.createClass({
  render: function() {
    return (
      <div className="c-card js-card-color">
        <div className="c-card__header" style={{ backgroundColor: this.props.bgColor }}></div>
        <div className="c-card__body">
          <p className="c-p u-bold">
            { this.props.name }
            {(() => {
              if (this.props.brightness > 0) {
                return this.props.brightness
              }
            })()}
          </p>
          <p className="c-p u-bold">
            {(() => {
              if (this.props.brightness > 0) {
                return "lighten " + this.props.brightness + "%"
              }
              else {
                return this.props.hexa
              }
            })()}
          </p>
        </div>
      </div>
    );
  }
});

var ColorScale = React.createClass({
  render: function() {
    const colorsKeys = Object.keys(colors); 
    const colorPanelScales = scale.map((brightness, index) => {
      if (brightness > 0) {
        var bgColor = mix(this.props.hexa, 'ffffff', 100 - brightness);
      }
      else {
        var bgColor = this.props.hexa;
      }
      return <ColorPanel key={ index } bgColor= { bgColor } name={ this.props.name } hexa={ this.props.hexa } brightness={ brightness } />
    })
        
    return <div className="row">{ colorPanelScales }</div>
  }
});

var ColorPalette = React.createClass({
  render: function() {
    const colorsKeys = Object.keys(colors); 
    const colorPanelList = colorsKeys.map((color, index) => {
      return <ColorScale key={ index } name={ color } hexa={ colors[color].basis } />
    })
        
    return <div>{ colorPanelList }</div>
  }
});

ReactDOM.render(
  <ColorPalette />,
  document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js