<main></main>

function getColor(base, factor) {
  return tinycolor(base).lighten(factor).toHexString();  
}

function getStyle(base, factor) {
  return {
    width: '50px',
    height: '50px',
    display: 'inline-block',
    background: getColor(base, factor),
  };
}

var App = React.createClass({  
  getInitialState() {
    return { color: '#FF0000' };
  },
  render: function() {
    return <div>
      <div>
        <input type="color" 
          value={this.state.color} 
          onChange={(e) => this.setState({color: e.target.value})} />      
      </div>
      <div style={getStyle(this.state.color, 40)} />
      <div style={getStyle(this.state.color, 30)} />
      <div style={getStyle(this.state.color, 20)} />
      <div style={getStyle(this.state.color, 10)} />
      <div style={getStyle(this.state.color, 0)} />
      <div style={getStyle(this.state.color, -10)} />
      <div style={getStyle(this.state.color, -20)} />
      <div style={getStyle(this.state.color, -30)} />
      <div style={getStyle(this.state.color, -40)} />
    </div>
  }
});

ReactDOM.render(<App />, document.querySelector('main'));